Now this is going to be a short post about getting you started with CSS illustrations. I love the illustrations you can make in CSS and it is surprisingly easy.
Note: You can find the pen for this illustration here.
So without further ado let's get started. The first thing we need is the HTML skeleton:
<div class="ice-cream">
<div class="ice-cream-body"></div>
<div class="ice-cream-stick"></div>
</div>
If you understand HTML, then you know what this piece of code does but anyway, this create a div
element with the class of ice-cream
which is the root of our little illustration. We have two other div
elements nested inside the root div
. They both have classes, ice-cream-body
and ice-cream-stick
respectively.
That is literally it for the HTML part. Now let's see the CSS behind this tiny masterpiece.
This is the body styling:
body {
background: #E0F9BC;
}
This just sets a background colour with the background
property.
Next, we need to style our root element, the div
element fo class ice-cream
.
.ice-cream {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 250px;
}
This will make it kind of responsive using absolute positioning. This transform: translate(-50%, -50%);
allows the responsiveness to work. Using absolute positioning, we can position our ice cream any way we want. The next two properties are just for the size of the ice-cream.
Now we can style the other two children div
elements. Here's the style for them.
.ice-cream-body {
position: relative;
width: 170px;
height: 250px;
background-color: pink;
left: 39px;
top: 20px;
border-radius: 80px 80px 20px 20px;
box-shadow: 17px 0px 0px 0px rgba(251,162,192,0.75);
}
.ice-cream-stick {
position: relative;
background-color: #F8DA84;
height: 100px;
width: 35px;
left: 105px;
top: 20px;
border-radius: 0px 0px 30px 30px;
}
The styling for the first element basically, declares relative
positioning. Then we give it a height and width. After that, we simply give it a background colour. For some extra styling we give a small box-shadow and border-radius. Lastly, we position it using left
and top
. We do the same for the other element, but with different values.
This is it! You just made a simple yet amazing ice-cream with CSS but don't eat it yet. Before that, if you liked this post, give it a reaction and comment down on what other illustrations should I make. That was it for this time and I will see in a next post. Toodleoo.