The Beginner’s guide to CSS Illustrations — Part 2

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.

If you missed the first part, then click below to read it.

The Beginner’s guide to CSS Illustrations — Part 1

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>

Create a circle

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.

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

Make the eyes

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>

Give her a wide smile

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.

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.

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.

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

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

Done!

Even more beautiful!

Let us look at the html once.

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 summon the pseudo-elements on the battlefield.

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

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.

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!😎

Smiley

Originally published at https://dev.to on December 15, 2020.