I find it truly fascinating how you can manipulate elements and create illustrations using purely CSS. It is the long and extremely time consuming way to create illustrations, no imports or code generated by exporting graphics in illustration software. This is done by manually coding in a code editor using HTML and CSS only. I am teaching myself how to do this (to get more comfortable using CSS) and figured I’d share my progress as well as what I did incase anyone is interested in learning as well.

This is my very first creation, very basic and simple. If you’re reading this, I am assuming you know the basics of HTML and CSS; however I try to explain as I go along for anyone trying to learn. I am very much at the beginner stage, so my knowledge is limited and I am learning as well. So keep that in mind, and let’s code!

I am using CodePen. I like it because you get a live view of what you are coding. They process and compile the code for you, plus it’s free and full of lots of inspiration. We will be making this smiley face:

Ok. First, let’s set up the basic structure by adding some background color and making a circle for the smiley’s head.

HTML

<div class="head"></div>

CSS

* {
  position: absolute;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

body {
  background: #a9edf5;
}

.head {
  width: 300px;
  height: 325px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #ffb908;
}

Ok, so now we’ve got a background and circle. The code in the HTML section is setting up our main container (the .head element is literally the head), which will hold all other HTML elements. It is important to have structure and hierarchy. The html and body tags are used to stylize the basic structure and add a little color to the background. This is what we have so far:

It is important to note, all the elements (specified by the asterisk, *) have been given the position: absolute; property. This removes the elements from the natural flow of the page and makes them independent. More about this below.

Let’s give this circle some personality with the addition of some eyes and a mouth.

HTML

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

CSS

.face {
  width: 150px;
  height: 170px;
  left: 75px;
  top: 85px;
}

.mouth {
  width: 100%;
  height: 100px;
  bottom: -30px;
  left: -5px;
  background-color: #200647;
  border-radius: 20px 20px 150px 150px;
  border: 5px solid #200647;
}

.eye-group {
  width: 150px;
  height: 50px;
  top: -35px;
  left: 0;
}

.eye {
  background-color: #200647;
  width: 50px;
  height: 100px;
  border-radius: 50%;
}

.eye-left {
  left: -5px;
}

.eye-right {
  right: -5px;
}

Take a look at the HTML code, and notice the .face element is not actually apart of the image. Instead, it is used to group the eyes and mouth together, which is called nesting. This is important CSS logic to understand. Nesting allows you to create a clear, well organized, easy to breakdown structure, by grouping elements that belong together. This makes the illustration easier to manipulate.

Now, more about the position: absolute; property. This is pertinent when stacking elements and allows us to control the order. Then, with the help of top/right/bottom/left properties, we are able to move each element and position them exactly how we want. Stacking can get tricky, if you’d like to read more in-depth, check out this article.

Ok, let’s add a little bit more details to the smiley by adding a tongue and pupils. To do this, we’ll nest .tongue inside our .mouth and apply the overflow: hidden; property to .mouth so we can hide part of the tongue that we don’t want shown.

HTML

<div class="head">
    <div class="face">
      <div class="mouth">
        <div class="tongue"></div>
      </div>
      <div class="eye-group">
        <div class="eye eye-left"></div>
        <div class="eye eye-right"></div>
    </div>
  </div>
</div>

CSS

.mouth {
  width: 100%;
  height: 100px;
  bottom: -30px;
  left: -5px;
  background-color: #200647;
  border-radius: 20px 20px 150px 150px;
  border: 5px solid #200647;
  overflow: hidden;
}

.tongue {
  width: 110px;
  height: 80px;
  left: 20px;
  top: 40px;
  background-color: #f94285;
  border-radius: 50%;
}

For the pupils, we’ll create small ovals and nest them inside each .eye element.

HTML

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

CSS

.pupil {
  width: 15px;
  height: 25px;
  top: 10px;
  left: 10px;
  background-color: #a9edf5;
  border-radius: 50%;
}

One last addition, let’s give a little dimension to our smiley by creating a inset shadow. Do this by adding the box-shadow property to the .head element.

CSS

.head {
  width: 300px;
  height: 325px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #ffb908;
  box-shadow: inset -15px -15px 20px rgba(0,0,0,0.25);
}

Ta-da!

Go ahead, smile at your smiley. We just made our first CSS illustration!

Feel free to copy or fork my pen and play around with the code yourself. Get comfortable with positioning and stacking, and change the colors/shape however you’d like!

I hope this was helpful. I’m still getting comfortable with CSS myself and have lots more to learn. Any constructive feedback is welcome. Happy learning!