Create a Simple Ice Cream Illustration in CSS

Create a Simple Ice Cream Illustration in CSS

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.