The Beginner's guide to CSS Illustrations - Part 2

Part 2 - Keeping things clean

Welcome back to the second and final part of this series. I hope you have mastered the art of drawing simple shapes with CSS. Have you tried creating some beautiful objects by combining the shapes? If yes, put the link to your CodePen or JSFiddle in the comments and share it with others. If you haven't, I would recommend you to first try drawing objects like clouds, a smiley, flowers, a simple car, ice cream, etc. Try to add as much detail as you can. Draw anything you like.

Pseudo-elements

One thing you will notice is that your html contains too many divs. This can make it look untidy. Also, with so many divs, at some point, you may face issues with positioning. To solve this problem and clean up the code, we have pseudo-elements, ::before and ::after. According to MDN,

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

If you have come across them somewhere, you might have noticed that, in many places, a single colon (:) is used instead two (::). As for now, you can use any rule. The two-colon syntax was introduced in CSS3 to distinguish between pseudo-elements and pseudo-classes (eg. :hover). Since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements. Now, let's see how it can clean our code.

Let us draw a nice smiley. To begin with, I will first create its face.

<div class="face"></div>

body {
  background: #FFECB3;
}

.face {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: #FFDB57;
}

Next, I will add the eyes. The divs defining the eyes must be inside the .face div, and, they should have an absolute positioning. I want the shape of the eyes to be elliptical. I guess you know how to draw an ellipse. So, now your HTML should look like this.

<div class="face">
  <div class="eye-grp">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
</div>

I have given the class eye to both the eyes since they should be identical. We can just add the styles to the eye class. Otherwise, we would have to copy the styles of one eye to the other. So the CSS should be

body {
  background: #FFECB3;
}

.face {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: #FFDB57;
}

.eye {
  position: absolute;
  height: 40px;
  width: 30px;
  background: #191F45;
  border-radius: 50%;
  top: 70px;
}

.left {
  left: 60px;
}

.right {
  right: 60px;
}

Now we have to draw the mouth. So, a smiling mouth should be a semi-circle. I hope, by now, you can draw semi-circle easily. Make sure that the mouth div is a sibling of eye-grp.

<div class="mouth"></div>

.mouth {
  width: 120px;
  height: 60px;
  border-radius: 5px 5px 60px 60px;
  background: #191F45;
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
}

That's a cute smiley😀, isn't it? Let us add some more details. First, I will add the pupils. So, create a div having class pupil inside both left and right divs.

<div class="eye left">
  <div class="pupil"></div>
</div>
<div class="eye right">
  <div class="pupil"></div>
</div>

.pupil {
  height: 20px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
}

Now, I will add a tongue. The tongue should be another semi-circle, but flipped horizontally (with respect to the mouth). Before you create the tongue, few more rules should be added to mouth div.

.mouth {
  overflow: hidden
  border: 5px solid #191F45;
  box-sizing: border-box;
}

The overflowing parts of the tongue should be hidden, and I added the border to create a narrow gap between the tongue and the border of the mouth. Now add the tongue div inside mouth and then add the CSS rules.

<div class="mouth">
  <div class="tongue"></div>
</div>

.tongue {
  width: 100px;
  height: 50px;
  background: #EE6055;
  border-radius: 50px 50px 0 0;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

A little shadow on the face won't do any harm.

.face {
  box-shadow: inset -10px -10px 0 0 #ffcb05;
}

Even more beautiful!

Let us look at the html once.

<div class="face">
  <div class="eye-grp">
    <div class="eye left">
      <div class="pupil"></div>
    </div>
    <div class="eye right">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>

Even though our smiley seems to be happy, our code does not. There are too many divs. Let us clean it up. So, I will now bring the pseudo-elements in the battlefield.

I will begin with removing the tongue div and replacing the CSS with .mouth::after.

<div class="face">
  <div class="eye-grp">
    <div class="eye left">
      <div class="pupil"></div>
    </div>
    <div class="eye right">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth"></div>
</div>

.mouth::after {
  content: "";  /* Important */
  width: 100px;
  height: 50px;
  background: #EE6055;
  border-radius: 50px 50px 0 0;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

Note: When using pseudo-elements, we must add the content property. Otherwise, it won't produce any effects. Whatever you put within the quotes will be shown on the screen. Since we don't want any text here, we can leave it blank.

Next, I will remove the pupil classes and replace them with eye::after in CSS.

<div class="face">
  <div class="eye-grp">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
  <div class="mouth"></div>
</div>

.eye::after {
  content: "";
  height: 20px;
  width: 15px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
}

The HTML is much happier now, just like our smiley! I hope this post helped you understand how pseudo-elements are used in CSS and how we can use them to reduce unnecessary elements in HTML. Stay safe, keep coding, and never stop learning!😎

Play with my 😀 on codepen.