DEV Community: Agathe Cocco

How to create pure CSS illustrations and animate them - Part 3

Agathe Cocco — Tue, 04 Sep 2018 11:22:19 +0000

This is the third part in a three-part series about CSS illustrations and animations. In this last part, we are going to build an animated lighthouse scene. For this, we'll look at new techniques such as SASS loops and CSS 3D transforms.

Part 1: Learning basics and workflow tips with a CSS Smiley Face
Part 2: Intro to CSS animations with a CSS Polaroid
Part 3: More advanced techniques with a CSS Lighthouse Scene

Here's what we'll be building:

Because this illustration is a bit more complex than the previous ones, we will go more quickly over what we've already seen. I will however introduce some new techniques like CSS 3D transforms, repeating-gradients and SASS loops.

Before we get started, let's observe what components make this illustration, and how they overlap. Our scene is composed of two main groups, the background and the lighthouse. We need to set the background at the bottom of the z pile, and the lighthouse at the top. Both of these two groups each contain many elements that also overlap, which can easily become confusing. Let's make use of the z-index property to ensure each element is at the right place in the pile.

Here's what our basic HTML/Pug tree looks like. We'll be adding a few more elements to it later on.

.scene
  .background
    .stars
    .moon
    .mountains
    .sea
      .waves
      .boat
  .lighthouse-group
    .land
    .lighthouse-holder
      .shadow
      .lighthouse
      .top
      .windows
      .door
        .stairs

In the SCSS, let's define color variables and global properties:

$x-dark: #29284c;
$dark: #4c4b82;
$medium: #717ae1;
$light: #b9befa;
$x-light: #d6d9f6;
$aqua: #75e2fa;
$grey: #9e9ebe;
$yellow: #f7f2b4;

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
* {
  position: absolute;
}
*:before,
*:after {
  content: "";
  position: absolute;
}

We'll work on the background first:

.scene {
  width: 100vw;
  height: 100vh;
}
.background {
  background: $x-dark;
  background-image: linear-gradient(
    $x-dark 0%,
    $dark 10%,
    $medium 60%,
    $aqua 90%
  );
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.sea {
  background: $x-dark;
  background-image: linear-gradient(
    to top,
    $x-dark 0%,
    $dark 30%,
    $medium 60%,
    $aqua 90%
  );
  width: 100%;
  height: 170px;
  bottom: 0;
  left: 0;
  z-index: 2;
}

The .scene element will act as our main container and we want it to be as wide and high as our screen. The .background is our first layer, and the .sea is placed on top. We are applying gradients to both elements with the background-image property. Again, in real life, we would have to use vendor prefixes for this property, but for the sake of brevity, let's omit them.

Using loops to generate and randomize content

On to the stars. We want to create about 60 stars, so we need 60 HTML elements. We also need to generate a unique position for each of these .star elements. It means 60 different CSS classes, or 60 uses of the nth-child selector. We don't really want to do this as it sounds really long and repetitive. Instead, let's us a loop.

In Pug and SCSS, just like in Javascript, loops are a powerful tool. They allow you, amongst other things, to easily and automatically generate content. Here's how it works.

First we need to create 60 .star elements with Pug. Pug loops are simply javascript loops with a slightly different syntax:

- for (var x = 0; x < 60; x++)
  .star

That's it! Only two lines of code!

Now we need to style these elements. First, we create a .stars container that will contain all the .star elements. Then we can define the common styles for all them. (we'll create the twinkle animation a bit later).

.stars {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  .star {
    border-radius: 50%;
    background-color: $light;
    animation: twinkle 5s ease-in-out infinite;
  }
}

We still cannot see any stars in our illustration because we haven't set a position or size yet. We need these properties to be different for each star. Like we said earlier, we could target these elements one by one and manually code a different value for each, but we've already decided against that. A SASS loop is going to help us randomly generate these values instead. Here's the syntax of a basic loop:

@for $i from 1 through (60) {
 // do something
}

In order to target each element with different values, we can use the nth-child selector:

@for $i from 1 through (60) {
  .star:nth-child(#{$i}) {
    // do something
  }
}

In CSS this will compile to:

.star-nth-child(1) {
  // do something
}

.star-nth-child(2) {
  // do something
}

...

.star-nth-child(60) {
  // do something
}

And to randomize the values, we are using the SASS random function:

@for $i from 1 through (60) {
  .star:nth-of-type(#{$i}) {
    top: random(100)+vh;
    left: random(100)+vw;
    width: random(4)+px;
    height: random(4)+px;
    animation-delay: random(5)+s;
  }
}

The random function takes an integer as a parameter, and returns a random value between 1 and the passed integer. So random(100) will return a random number between 1 and 100. We then add the unit we want as a suffix. We want the stars to spread across the entire screen, so I'm using the vw/vh units for the top and left properties. It will place the stars at a random position on the screen, and because the random function is defined in the loop, it will be called for each star, generating a new position each time.

This was easy to set up, but we have an issue. If you look at the stars, you'll see that they aren't round. This is because the height and width properties have each been assign a different value that's been generated with a different instance of the random function. To fix this we need to store the result of the random function in a variable:

@for $i from 1 through (60) {
  $size: random(4)+px;
  .star:nth-of-type(#{$i}) {
    top: random(100) + vh;
    left: random(100) + vw;
    width: $size;
    height: $size;
    animation-delay: random(5) + s;
  }
}

Here we go. Our stars aren't animated yet but we'll fix this later.

Let's add some more details to our background:

The moon is created with a simple border-radius, combined with the box-shadow property to create a glow around it:

.moon {
  width: 80px;
  height: 80px;
  top: 25%;
  right: 10%;
  border-radius: 50%;
  z-index: 2;
  background-color: $x-light;
  box-shadow: 0 0 10px $x-light, 0 0 20px $x-light, 0 0 30px $x-light, 0 0 40px $x-light, 0 0 50px $aqua, 0 0 100px $x-light;
}

For the mountains, we use a Pug loop again to create four elements.

.mountains
  - for (var i = 0; i < 4; i++)
    .mountain

Each mountain is essentially a square that's been rotated by 45 degrees, and half hidden behind the .sea element. Then for each, we use the :after selector to add a gradient. We can give each of them a different position and size using the nth-child selector.

.mountains {
  width: 100%;
  height: 250px;
  bottom: 65px;
  z-index: 3;
  .mountain {
    width: 250px;
    height: 250px;
    background-color: $medium;
    right: 50px;
    bottom: -40px;
    transform: rotate(45deg);
    border-radius: 3px;
    &:after {
      width: 100%;
      height: 100%;
      opacity: 0.7;
      background-image: linear-gradient(135deg, $dark 0%, $medium 20%, $aqua 40%);
    }
  }
  .mountain:nth-child(2) {
    right: 220px;
    width: 240px;
    height: 240px;
    z-index: 2;
  }
  .mountain:nth-child(3) {
    right: 350px;
    width: 260px;
    height: 260px;
  }
  .mountain:nth-child(4) {
    right: 130px;
    width: 200px;
    height: 200px;
    z-index: 3;
    bottom: -70px;
    &:after {
      background-image: linear-gradient(135deg, $dark 0%, $medium 6%, $aqua 20%);
    }
  }
}

To add waves in the sea, I'm using Pug and SASS loops again:

.sea
  - for (var i = 0; i < 30; i++)
    .wave

.wave {
  background-color: $x-light;
  height:3px;
  border-radius: 100%;
  opacity: 0.2;
  animation: wave 5s linear infinite;
}
@for $i from 1 through (30) {
  $size: random(100) + 50px;
  .wave:nth-of-type(#{$i}) {
    bottom: random(170) + px;
    left: random(100) + vw;
    width: $size;
    opacity: random (5) * 0.1;
    animation-delay: random(3) + s;
  }
}

The last element in the background is the boat. It is composed of three main parts: a base, and two sails. To create the base and the triangular shapes of the sails, let's use the clip-path property. This tool is great for creating clip-path shapes on the fly.

.boat {
  width: 90px;
  height: 90px;
  bottom: 90px;
  .base {
    width: 110px;
    height: 25px;
    bottom: -20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
    background-color: $dark;
  }
  .sail:nth-child(1) {
    width: 90px;
    height: 80px;
    left: 5px;
    clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
    background: linear-gradient($light 0%, $dark 60%);
  }
  .sail:nth-child(2) {
    width: 80px;
    height: 70px;
    left: 15px;
    bottom: 10px;
    transform: scaleX(-1);
    clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
    background: linear-gradient($light 0%, $dark 60%);
  }
}

the transform: scaleX(-1) on the second sail is used to flip it horizontally.

And with :before and :after selectors, we can add a shadow and a trail. The z-index:-1 property ensures these elements are placed behind their siblings:

.boat {
  width: 90px;
  height: 90px;
  bottom: 90px;
  &:after {
    height: 8px;
    width: 200px;
    background: linear-gradient(90deg, transparentize($x-light, 0.3) 30%, rgba(255, 255, 255, 0) 100%); 
    border-radius: 40%;
    top: 105px;
    left: 20px;
    z-index: -1;
  }
  &:before {
    width: 92px;
    height: 50px;
    left: 25px;
    bottom: -70px;
    background: linear-gradient(to bottom, transparentize($x-dark, 0.2) 30%, transparentize($x-dark, 1) 100%);
    z-index: -1;
  }
  //...
}

Using CSS transforms

The background part of our illustration is done. Let's move on to the lighthouse.

We'll be using a .lighthouse-group div that will act as the main container for this part of the illustration. It has two main components, the land, and the actual lighthouse. Let's place .lighthouse-group on the document by assigning it a size and position:

.lighthouse-group {
    width: 50%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 2;
}

Let's add the bit of land first:

.land {
  width: 400px;
  height: 60px;
  left: -30px;
  bottom: 0;
  background-image: linear-gradient(to top, $x-dark 80%, $medium 100%);
  transform: skewX(35deg);
  border-radius: 10px;
}

With the transform property we can skew the element, then move it to the left and hide the left side.

Now for the actual lighthouse, we can start by giving a size and position to the lighthouse group:

.lighthouse-holder {
  height: 480px;
  width: 100px;
  bottom: 80px;
  left: 180px;
}

Then, to make the body of the lighthouse narrower at the top, we're going to use two transform properties, perspective and rotateX.

The perspective property sets a 3D space for the lighthouse element, then the rotateX property rotates it on the X axis on this 3D space. Technically, the top of the lighthouse is further away from us, while the bottom is nearer, but this gives us the trapeze effect we want.

.lighthouse {
  width: 100%;
  height: 100%;
  transform: perspective(600px) rotateX(20deg);
  background-color: $x-light;
}

Here's an excellent link if you wish to know more about CSS 3D transforms.

Next, to create the stripes, let's use a repeating gradient:

.lighthouse {
  width: 100%;
  height: 100%;
  transform: perspective(600px) rotateX(20deg);
  background-color: $x-light;
  background-image: repeating-linear-gradient(
    -40deg,
    transparent,
    transparent 60px,
    $dark 60px,
    $dark 120px
  );
}

I also want to add some shading with another gradient layered on top. We'll use the :after pseudo-selector for that:

.lighthouse {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: perspective(600px) rotateX(20deg);
  background-color: $x-light;
  background-image: repeating-linear-gradient(
    -40deg,
    transparent,
    transparent 60px,
    $dark 60px,
    $dark 120px
  );
  &:after {
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image: linear-gradient(
      90deg,
      transparentize($x-light, 0.4) 0%,
      $x-dark 8%,
      transparent 70%,
      transparentize($x-light, 0.6) 100%
    );
  }
}

And we also need an extra shadow at the bottom of the lighthouse. We can use the skewX property for this again:

.shadow {
  width: 117px;
  height: 50px;
  left: -32px;
  bottom: -70px;
  background: $x-dark;
  transform: skewX(-45deg);
}

To create the windows, we first need to add four .window elements to the HTML. To space them out, we can use a SASS loop like we did before. However this time, instead of using the random function, we can do a simple addition.

First, we're setting the original value of the bottom property to 90px. Then, at each run of the loop, we add 90px to this value. The end result is four identical .window elements that are each 90px apart vertically.

.windows
  - for (var i = 0; i < 4; i++)
    .window

.windows {
  height: 100%;
  width: 100%;
  .window {
    background-color: $x-dark;
    height: 25px;
    width: 15px;
    left: 43px;
    border-bottom: 2px solid rgba($light, 0.7);
    border-radius: 25px 25px 0 0;
  }
  $bottom: 90px;
  @for $i from 1 through (4) {
    .window:nth-of-type(#{$i}) {
      bottom: $bottom;
    }
    $bottom: $bottom + 90px;
  }
}

The door is pretty straightforward. For the stairs, let's use a combination of perspective and rotateX again to get a trapeze shape. Then a repeating gradient will create steps.

.door {
  background-color: $x-dark;
  height: 40px;
  width: 25px;
  left: 38px;
  bottom: -2px;
  border-radius: 2px 2px 0 0;
  .stairs {
    width: 27px;
    height: 28px;
    background-color: $x-dark;
    top: 34px;
    left: -1px;
    transform: perspective(100px) rotateX(45deg);
    background-image: repeating-linear-gradient(
      to bottom,
      $x-dark,
      $x-dark 4px,
      $light 4px,
      rgba(white, 0.1) 5px
    );
  }
}

Okay, the bottom part of the lighthouse is done. Let's move on to the top part.

First we need to add a few HTML elements:

.top
  .light-container
    .light
  .rail
  .middle
  .roof
    .roof-light
  .glow

We are first setting a size and a position for the .top container, and then, we can get started on the .base part of the structure. We're using the perspective + rotateX technique again to give it some shape, as well as a repeating gradient to create the rail.

.top {
  width: 94px;
  height: 60px;
  left: 3px;
  top: -15px;
    .rail {
      width: 100%;
      height: 17px;
      bottom: 1px;
      border: 3px solid $x-dark;
      border-radius: 1px;
      transform: perspective(1000px) rotateX(-35deg);
      background-image: repeating-linear-gradient(
        90deg,
        $x-dark,
        $x-dark 3px,
        $grey 3px,
        $yellow 10px
      );
      background-position: -2px 0;
   }
}

The .middle part is very similar, except we don't need a transform. We're also using the :before selector to add a nice glow behind it:

.middle {
  width: 88px;
  height: 35px;
  left: 3px;
  bottom: 14px;
  border: 2px solid $x-dark;
  border-radius: 3px;
  background-image: repeating-linear-gradient(
    90deg,
    $x-dark,
    $x-dark 4px,
    $grey 4px,
    rgba(255, 255, 255, 0) 21px
  );
  background-position: -2px 0;
  &:before {
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: $yellow;
    box-shadow: 0 0 10px $x-light, 0 0 20px $yellow, 0 0 30px $yellow,
    0 0 40px $yellow, 0 0 70px $yellow;
  }
}

For the roof, we can use the border technique to create a triangular shape.

There are a handful of ways to create triangles in css. Earlier we used the clip-path method to create the triangular sails of the boat. In this case however, I want to use :before and :after to create the top parts of the roof, which clip-path wouldn't let me do.

.roof {
  width: 0px;
  height: 0px;
  left: -3px;
  bottom: 45px;
  border-left: 50px solid rgba(255, 255, 255, 0);
  border-right: 50px solid rgba(255, 255, 255, 0);
  border-bottom: 40px solid $x-dark;
  &:before {
    width: 14px;
    height: 14px;
    left: -7px;
    bottom: -7px;
    background-color: $x-dark;
    border-radius: 50%;
  }
  &:after {
    width: 4px;
    height: 14px;
    left: -2px;
    bottom: 5px;
    background-color: $x-dark;
    border-radius: 3px;
  }
}

Last we need to add some light on the roof. We've run out of pseudo-selectors so we need to create a new HTML .roof-light element. This time I'm using the clip-path property to make sure the gradient is contained in the roof:

.roof-light {
  width: 100px;
  height: 40px;
  left: -50px;
  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
  background-image: linear-gradient(
    135deg,
    $x-dark 40%,
    rgba($yellow, 0.5) 100%
  );
}

The last element of our illustration is the light. Because we are going to animate it in a moment on a 3D space, we need two elements. The .light-container element will be used to rotate the light from back to front. The .light element is used to give the light its trapeze shape:

.light-container {
  height: 40px;
  width: 35vw;
  bottom: 4px;
  left: 40px;
  transform-style: preserve-3d;
  transform-origin: left bottom;
  transform: perspective(500px) rotateY(0deg);
  .light {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: left center;
    transform: perspective(500px) rotateY(-35deg);
    background: linear-gradient(90deg, $yellow 40%, rgba(255, 255, 255, 0) 100%);
  }
}

And the last touch is to add a glow when the light rotates towards us. We'll set its opacity to 0 for now:

.glow {
  width: 100px;
  height: 60px;
  top: 0;
  left: 0;
  background-color: $yellow;
  opacity: 0;
  border-radius: 50%;
  box-shadow: 0 0 10px $yellow, 0 0 20px $yellow, 0 0 30px $yellow, 0 0 40px $yellow, 0 0 50px $yellow, 0 0 60px $yellow, 0 0 70px $yellow, 0 0 80px $yellow;
}

And our illustration is complete! This was a lot of work, but we're not quite done yet. It's time for animations!

Here are the elements we are going to animate:

the stars will twinkle
the waves will move from left to right
the boat will move across the screen
the shadow of the boat will transform as it moves away from the moon
the light will rotate from back to front
a glow will appear when the light faces us

The star animation is simple as we are only animating the opacity property. We've previously added a random animation delay to the star elements, which ensures the animation doesn't run simultaneously for all stars.

@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.star {
  //...
  animation: twinkle 5s linear infinite;
}

The wave animation is an easy one too:

@keyframes wave {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
}

.wave {
  //...
  animation: wave 5s linear infinite;
}

Let's animate the boat. Initially, it needs to be off screen. We can use the translateX property to move the boat to the far right of the screen. During the animation, the boat will appear to the right, then slowly move to the left, then disappear off screen again. I've also added the scale(0.8) value to reduce its size a bit.

@keyframes boat {
  0% {
    transform: translateX(120vw) scale(0.8);
  }
  80%,
  100% {
    transform: translateX(-25vw) scale(0.8);
  }
}

We also need to animate its shadow as it passes in front of the moon, then moves away from it:

@keyframes boatShadow {
  0% {
    transform: skewX(35deg) translateX(15px);
  }
  50%,
  100% {
    transform: skewX(-55deg) translateX(-40px);
  }
}

$boatSpeed: 100s;

.boat { 
  //... 
  animation: boat $boatSpeed linear infinite; 
  &:after { 
    //... 
    animation: boatShadow $boatSpeed linear infinite; 
  }
}

The light animation is the most complex one. It needs to rotate to the back first, then rotate to the front, then go back to its initial state at the end of the animation.

The initial state is the one we have defined in our .light-container selector already. To rotate it to the back, we are rotating it on its Y axis by 35 deg. Then to rotate to the front, we do the same but with a negative value:

@keyframes lightRotate {
  0%,
  100% {
    // initial and final state
    transform: perspective(500px) rotateY(0deg);
  }
  25% {
    //rotates to the back
    transform: perspective(500px) rotateY(35deg);
  }
  75% {
    // rotates to the front
    transform: perspective(500px) rotateY(-35deg);
  }
}

$lightSpeed: 40s;

.light-container {
  //...
  animation: lightRotate $lightSpeed linear infinite;
}

And lastly, we also need to make the glow appear when the light is rotating towards us:

@keyframes lightGlow {
  0%, 50%, 100% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}

.glow {
  //...
  animation: lightGlow $lightSpeed linear infinite;
}

Aaaaand we're done!

3D transforms can be a bit tricky to understand, and if you're struggling a bit, here's a tip: add a border to all elements that have a 3D transform. It'll reveal the shape and position of all elements, including the hidden ones.

Eg:

.light-container {
  //...
  border: 1px solid white;
  .light {
    border: 1px solid pink;
  }
}

Here's the final project in Codepen.

Next steps

So you've followed along the tutorial and built and animated your first CSS images. Now what? If you don't know where to begin, I suggest starting by replicating existing illustrations. Look on Dribbble and use a simple illustration you like as a reference (as long as you give credit to the illustrator and link to the original illustration, it's totally fine!). Starting with a model will take away the creative aspect and let you focus on the code and logic. When you are comfortable enough with the process, you'll find it easier to create your own CSS images from scratch.

As a rule of thumb, it is best to go for a ‘flat design’ look, with geometric shapes, no textures and flat colors, as they're easier to replicate with CSS. But then again, with a little imagination and experimentation, you can achieve amazing results. Here are a few examples of impressive pure CSS illustrations:

CSS Francine by Diana Adrianne
Cat Swinging on String by David Khourshid
Pure CSS Moustached Nanny by Julia Muzafarova
Only CSS Paper Bird by Yusuke Nakaya
CSS Camera by Cassidy Williams
Glowing Meteor by Marjo Sobrecaray

Useful tools and resources

That's it folks! I hope you enjoyed this series and learned a few things along the way. Follow me on CodePen to see what I'm up to, or hit me up on Twitter to keep in touch.

How to create pure CSS illustrations and animate them - Part 2

Agathe Cocco — Tue, 04 Sep 2018 11:21:23 +0000

This is the second part in a three-part series about CSS illustrations and animations. In this part, we will build a CSS Polaroid and then learn how to animate it.

Part 1: Learning basics and workflow tips with a CSS Smiley Face
Part 2: Intro to CSS animations with a CSS Polaroid
Part 3: More advanced techniques with a CSS Lighthouse Scene

Here's what we're going to build:

If you want to have a go at building this yourself, pause here. There’s nothing in here that we haven’t already seen in the previous part. Don't worry too much about exact colors and sizes, and remember that there are often multiple ways to achieve the same result.

Okay let’s do this. Let’s take a close look at this image and decompose it. It is made of fairly simple shapes, mostly rounded rectangles and circles, and we can easily recreate them with basic CSS. Let’s see what the basic HTML tree looks like:

.polaroid
  .button
  .flash
  .polaroid-body
  .blinker
  .zoom
  .stripes

The .polaroid element acts as our main container and will serve as a reference for the positioning of all other elements.

Let's get started by setting a few basic properties to our html and body selectors, as well as a few color variables:

$background: #b5e8fb;
$grey: #34495e;
$dark-grey: #212f3d;

html, body { 
  height: 100%; 
  width: 100%; 
  padding:0;
  margin:0;
  overflow: hidden; 
} 
html { 
  box-sizing: border-box; 
} 
*, *:before, *:after { 
  box-sizing: inherit; 
}
body { 
  background: $background; 
}

All elements in our illustration need to have an absolute position, and so do all of the :before and :after pseudo-selectors.

* { 
  position: absolute; 
}
*:before, *:after { 
  content: ""; 
  position: absolute; 
}

Let's center the main container vertically and horizontally on the page, and assign it a width and a height.

.polaroid { 
  width: 420px;
  height: 280px;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
 }

Now that our environment is set up, we can start working on the different shapes of the polaroid. First, we need a .polaroid-body element that will represent the body of the camera. We can use SASS's darken function to generate a shade that matches the background for the shadow. It gives a softer look than using plain black.

.polaroid-body {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background-color: #fff;
  box-shadow: 10px 10px darken($background, 5%);
}

The button is straightforward. We want to place it behind the body of the polaroid, and the natural flow of the HTML will take care of this for us.

.button { 
  width: 10%; 
  height: 5%; 
  top: -2%; 
  left: 14%; 
  background-color: #cb214a; 
  border-radius: 16px; 
}

Since we need two selectors for the flash, we can use :after:

 .flash { 
   width: 24%; 
   height: 15%;
   top: -12%; 
   left: 38%; 
   background-color: $grey; 
   border-radius: 8px; 
   &:after { 
     width: 36%; 
     height: 60%; 
     background-color: lighten($grey, 30%); 
     border-radius: 5px; 
     top: 10%; 
     left: 32%; 
   } 
}

The blinker is pretty simple too:

.blinker {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: $dark-grey;
  top: 15%;
  left: 15%;
}

Let's move on to the zoom:

.zoom { 
  width: 50%; 
  height: 75%;
  left: 25%; 
  top: 12.5%;
  background: $dark-grey; 
  border-radius: 50%; 
  border: 5px solid $grey; 
  box-shadow: 10px 10px rgba(0, 0, 0, 0.1); 
  overflow: hidden; 
  &:before { 
    width: 80%; 
    height: 80%; 
    top: 10%; 
    left: 10%; 
    border-radius: 50%; 
    background: #2c3e50; 
    border: 10px solid $grey; 
  } 
  &:after { 
    width: 40%; 
    height: 40%; 
    top: 30%; 
    left: 30%; 
    border-radius: 50%; 
    background: $dark-grey; 
  } 
}

Using a combination of pseudo-selectors and borders, we recreated the different parts of a zoom with only one div. Sweet!

Now, I want to add a few more details to our zoom, but we've run out of pseudo-selectors. Let's add one div to our HTML:

.polaroid
  .button
  .flash
  .polaroid-body
  .blinker
  .stripes
  .zoom
    .reflections

.reflections { 
  background-color: #fff; 
  opacity: 0.3; 
  width: 100%; 
  height: 100%; 
  left: -35%; 
  top: -35%; 
  z-index: 99; 
  transform: rotate(-45deg); 
  &:after { 
    background-color: #fff; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    left: 50%; 
    top: 105%; 
    opacity: 0.5; 
  } 
}

The main reflection is made with a square rotated by 45 degrees. I've added the property overflow:hidden to the zoom element to only reveal the part of the reflection that overlaps with the it. With the :after pseudo-selector, I have added another small light reflection.

Our polaroid is almost done. We need to add a last detail: the rainbow stripes so representative of the brand. There are different ways to achieve this. The simplest way would be to create five divs, and assign a different background color to each. We could also have a combination of pseudo-selectors and borders, like we did with our zoom. Another option would be to apply a gradient with color stops. Instead, we're going to use the box-shadow property and chain multiple values

.stripes {
  height: 7px;
  width: 50%;
  right: 0;
  top: 40%;
  box-shadow: 0px 7px rgb(214, 0, 121), 0px 14px rgb(230, 141, 21),
              0px 21px rgb(254, 200, 3), 0px 28px rgb(221, 229, 107),
          0px 35px rgb(62, 162, 48), 0px 42px rgb(1, 136, 194);
}

Again, this goes to show there are often multiple ways to achieve the same result. There's no right or wrong way to do it, and it all comes down to your own preferences. I like to keep my code as DRY as possible so I will often opt for the method that requires the least amount of code.

And we're done with our Polaroid!

CSS Animations

Now on to my favourite part: animating the illustration!

There are different ways to create animations in web development, almost all of which can be used to animate CSS images. However, in the spirit of the theme of this series, we will of course use CSS animations.

Animations basics

CSS animations are achieved in two steps.

Suppose you want to create an animation where you rotate a square.

You will first need a @keyframes rule:

@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

This rule is composed of two keyframe selectors, 0% and 100%, inside of which we can add CSS properties. These properties will control the appearance of our square at that point in the animation.

In the example above, the square will rotate from 0 to 360 degrees.

There are only two keyframe selectors defined in this rule, but we can add as many as we like. Suppose we don't want our square to make a full rotation, but instead
rotate to 180 degrees, then rotate back to 0. It can be achieved with an extra keyframe selector:

@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  50% {
    transform: rotate(180deg)
  }
  100% {
    transform: rotate(0deg)
  }
}

Any point between two keyframe selectors represent the transitioning state from one selector to another. For example, assuming the animation is linear, at 25% the square will have rotated by 90 degrees.

The second step is to call this rule in a selector with the animation property:

.square {
  animation-name: rotation;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

Or with a shortcut:

.square {   
  animation: rotation 5s linear infinite; 
}

These animation sub-properties allow us to call our @keyframes rule and set parameters such as duration, easing, delay etc. Most of them are optional but we must specify a name and a duration. Read more about them here.

Although we won't use them in this tutorial, real life CSS animation declarations and @keyframes rules both require vendor prefixes to work across all modern browsers:

.square {
  -webkit-animation: rotation 5s linear infinite;
  -moz-animation:    rotation 5s linear infinite; 
  -o-animation:      rotation 5s linear infinite; 
  animation:         rotation 5s linear infinite; 
}

-webkit-@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

-moz-@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

-o-@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

Animating our CSS Polaroid

Now that we've got the basics down, let's animate our CSS Polaroid. I would like to create a sequence of animations in which first the button is pressed, then the blinker blinks, then the zoom rotates, and lastly the flash goes off. Then the animation will repeat infinitely.

Usually, creating sequences with CSS keyframes isn't recommended as there is no easy way to chain multiple separate animations. Instead, you have to time each of them just right so they are each triggered at the right time. This can quickly become a pain if the animation is complex, but this one is simple enough and I think it'll be good practice! Let's get started.

First, we are missing an element: the flashlight. Let's add it quickly:

.polaroid
  .button
  .flash
  .polaroid-body
  .blinker
  .stripes
  .zoom
    .reflections
.flashlight

.flashlight {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(white, 0.7);
  transition: all ease 0.2s;
  opacity: 0;
}

I've broken the rule and placed the flashlight element outside of our main container. This is because I want it to take the full width and height of the screen. I've also set its opacity to 0 as we don't want it to be visible for now.

The first animation will be the press on the button. It needs to move down, then back up to its original position like so:

@keyframes button {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

Then we can call this rule in the .button selector:

.button {
  //...
  animation: button 5s linear infinite;
}

This doesn't look quite right, the animation is way too slow. We've set the duration of the animation to 5s, but this supposed to be the length of the whole sequence, with all four animations. We need to shorten the length of this one. Let's have it run from 5% to 15%.

@keyframes button {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(10px);
  }
  15% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

We can take a shortcut and write it like this:

@keyframes button {
  0%, 5%, 15%, 100% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(10px);
  }
}

Lastly, if we look closely at the timeline, we see that the button is not being animated between 0% and 5%, or between 15% and 100%. The animation only runs from 5% to 15%, and at any other point in the 5s timeline, it's at its original, untransformed state: (translateY(0)).

Hence the start and end keyframe selectors are not needed:

@keyframes button {
  5%, 15%{
    transform: translateY(0);
  }
  10% {
    transform: translateY(10px);
  }
}

I said 'original state' above because the .button element hasn't been attributed a transform property to begin with. If for example we had this:

.button {
  transform: translateY(-20px);
}

then the above shortcut wouldn't work, because from 15% to 100% the button would be transitioning back to that position.

Now let's move on to the second animation, the zoom rotation. Let's have it start at 20%, rotate by 20 degrees for 6% of the total duration, then rotate back to its initial position for another 6%.

@keyframes zoom {
  20%, 32%  {
    transform: rotate(0deg);
  }
  26% {
    transform: rotate(20deg);
  }
}

.zoom {
  //...
  animation: zoom 5s linear infinite;
}

Cool. Now let's animate the blinker. We're going to animate the background color to make it flash red three times.

@keyframes blinker {
  33%, 37%, 39%, 43%, 45%, 50% {
    background-color: $dark-grey;
  }
  34%, 36%, 40%, 42%, 46%, 48% {
    background-color: $red
  }
}

.blinker { 
  //... 
  animation: blinker 5s linear infinite; 
}

It's starting at 33%, then transitioning to a red background for 1% of the total duration, then pausing for 2%, then transitioning back to grey for 1%. And it's repeating this sequence 2 more times.

You can see how the possibility to chain or loop independent animations would be useful in this case. It would be nice to be able to define one blink animation, then set it to repeat twice, instead of having to define so many keyframe selectors. Alas, CSS doesn't offer this option, so we must resort to this kind of calculation to get the effect we want.

And last, the flash animation:

@keyframes flashlight {
  55%, 65% {
    opacity: 0;
  }
  56% {
    opacity: 1;
  }
}

.flash-light { 
  //... 
  animation: flashlight 5s linear infinite; 
}

Our animation can stop here. Nothing will happen between 65% and 100%: this will create a nice pause before the animation restarts.

One last thing we can do is store the duration of the animation into a variable:

$duration: 5s;

.button {
  //...
  animation: button $duration linear infinite;
}
.zoom {
  //...
  animation: zoom $duration linear infinite;
}
.blinker { 
  //... 
  animation: blinker $duration linear infinite; 
}
.flash-light { 
  //... 
  animation: flash-light $duration linear infinite; 
}

This will make it really easy to change the speed of the animation if we decide to.

Here's the final project in CodePen.

By now you should have a good understanding of how to create pure CSS images. Let's practice all these concepts one last time. In the third and last part of this series, we'll look at some new techniques to build an animated lighthouse scene.

Part 3: More advanced techniques with a CSS Lighthouse Scene

How to create pure CSS illustrations and animate them - Part 1

Agathe Cocco — Tue, 04 Sep 2018 11:19:40 +0000

I've always had a great interest in design, illustrations and colour palettes, but having spent the last few years focusing on becoming a better front-end developer, I've been left with little time to practice my creative skills. When I was first introduced to CSS images, I couldn't wait to give it a try. At last I could play around with shapes and colors, and explore and develop my creativity while coding!

But first, what is a pure CSS image?

A pure CSS image is an illustration that has been built with HTML and CSS. It excludes the use of image file imports, or code generated by exporting graphics in illustration software. In other words, it's an image that has been entirely manually coded in a code editor, using HTML and CSS only.

The principle is simple: with HTML, you can create as many divs as you like, which will each represent the basic shape of a component of the final image. With CSS properties such as gradients, transform, border-radius, shadows and so on, you can transform these basic shapes and arrange them into a nice illustration.

Why CSS images?

But what’s even the point of CSS images, you ask? CSS is primarily meant to style web pages after all, and there are more adapted and efficient tools to produce quality and lightweight graphics for web design (think SVG). Indeed, not only does using CSS for illustration have some design limitations, the result can be overly complex, time consuming and face some major cross browser/device issues.

So there is definitely a place and time for CSS images. However, creating CSS Illustrations is a great way to get better at CSS and to be introduced to new tools and concepts, such as animations, preprocessors or more obscure CSS properties. I feel my CSS skills have skyrocketed ever since I started coding CSS images, and I have become much more familiar with concepts I didn't know much about, like the wide variety of CSS selectors, 3D transforms and keyframes animations.

Who is it for?

CSS illustrations are great for:

Illustrators or designers hoping to use their designing skills to learn, or get more confident with html/css
Front-end developers hoping to work on their creativity and develop a good eye for design
Anyone wanting to have a bit of fun while strengthening their CSS skills
Anyone hoping to connect with a community, inspire and be inspired
Or anyone up for a good challenge

In this series, we'll learn how to create three CSS illustrations, ranging from simple to complex. We'll learn the basics of CSS animations and how to use them to animate our illustrations. Along the way, we'll find out what concepts, tools and techniques can help speed up our workflow.

Part 1: Learning basics and workflow tips with a CSS Smiley Face
Part 2: Intro to CSS animations with a CSS Polaroid
Part 3: More advanced techniques with a CSS Lighthouse Scene

While this tutorial series doesn't require any advanced knowledge of web development, I'm assuming you are familiar at least familiar with HTML and CSS.

A couple of suggestions before we begin:

Open a CodePen account, if you don't have one already. It'll take away the pain of having to set up a project, especially since we'll be using CSS preprocessors and templating languages.
Use either Chrome or Firefox, as other browsers have proven to be buggy with CSS illustrations.

Basics

Okay enough talk, let’s get started with our first CSS image!

Here’s a circle:

<div class="circle"></div>

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin:0;
}
body {
  background: #FEEE9D;
}
.circle {
  position: absolute;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #FBD671;
}

Nothing impressive so far.

We're going to add a few elements to turn this circle into a smiley face. The circle will be the head, and we can add eyes and a mouth:

<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>
</div>

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
body {
  background: #FEEE9D;
}
* {
  position: absolute;
}
.head {
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #FBD671;
}
.face {
  width: 150px;
  height: 170px;
  left: 75px;
  top: 75px;
}
.mouth {
  width: 100%;
  height: 75px;
  bottom: 0;
  left: 0;
  background-color: #20184E;
  border-radius: 10px 10px 150px 150px;
  border: 5px solid #20184E;
}
.eye-group {
  width: 150px;
  height: 50px;
  top: 10px;
  left: 0;
}
.eye {
  background-color: #20184E;
  width: 30px;
  height: 50px;
  border-radius: 50%;
}
.eye-left {
  left: 15px;
}
.eye-right {
  right: 15px;
}

Okay, let’s have a look at what’s going on here.

Main container

We have a main container, in this case the .head element, that contains every other HTML elements. This is, as you would expect, to center our illustration, and serve as a reference for the positioning of everything else.

Absolute positioning

All elements have the position: absolute property. This allows, with the help of the top/right/bottom/left properties, to precisely position them relatively to their parent. It's important to note that absolute positioning removes elements from the natural flow of the page. It means that the position of an element with that property will not affect the position of other elements, and will not be affected by their position either. Assigning the position: absolute property to all elements by default will ensure they will all be independent from each other. More on positioning here.

* {
  position:absolute;
}

Nesting

Following this logic, we use nesting to group elements together. Observe the .face element. It is not an actual component of the image, but used only to group the eyes and the mouth together. Both .mouth and .eye-group 's position (and size, if we use % instead of px) will refer to .face. If, for example, we decide we want to reposition the face on the head later, we can do it at once instead of having to tweak the properties of both .mouth and .eyes. This is basic CSS logic and won't be new to you if you have experience in UI development. As a rule of thumb, nesting allows a clearer structure because it groups elements that belong together, and make the illustration easier to manipulate.

Stacking

Using absolute positioning allow us to have more control on the stacking order of the elements. Naturally, the stacking order follows the flow of the HTML elements. The first object will be at the bottom of the pile (at the far back), while the last one will be on top (closest to you). With the z-index property, we can change the position of each element in the pile and make them overlap how we want to, provided these elements belong to the same stacking context. The higher the value of z-index, the higher it'll be in the pile.

Stacking contexts are a bit tricky and don't always behave as you would expect them to. You can read more about what triggers the creation of a new stacking context here.

Classes only

We only use CSS classes to target and style our HTML elements as we don't want to be bothered by specificity issues.

Phew, that was a lot already. But these are very important concepts of CSS illustrations, and CSS in general. Once you are comfortable with positioning and stacking, your CSS skills will improve drastically.

Now that we have a basic understanding of how to position elements, let’s jazz up our smiley face a little. I want to add a few details like a tongue, pupils and a shadow.

The shadow is straightforward but adds a nice touch:

.head {
  width: 100%;
  height: 100%;
  background-color: #FBD671;
  border-radius: 50%;
  box-shadow:inset -10px -10px 0px #EFBB42;
}

The tongue is a simple pink circle, but we only want to show part of it to create the illusion that it's inside the mouth. To do this, we nest .tongue in .mouth and apply the overflow: hidden property to .mouth.

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

.mouth {
  width: 100%;
  height: 75px;
  background-color: #20184E;
  left: 0;
  bottom: 0;
  border-radius: 10px 10px 150px 150px;
  border: 5px solid #20184E;
  overflow:hidden;
}
.tongue {
  width: 100px;
  height: 80px;
  left: 25px;
  top: 30px;
  background-color: #F15962;
  border-radius: 50%;
}

And we can add pupils with a simple oval inside our .eye elements.

<div class="container">
  <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>
</div>

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

It's looking much better already.

More advanced concepts

Now that we have built our first CSS image, let’s take a step back and look at how we can improve our code. While these steps aren't necessary at all to build CSS images, I find they greatly improve my workflow, and helped me getting much better at CSS in general.

CSS Preprocessors

If you are familiar with CSS preprocessors you know there’s a better way to do this. I won’t delve into how to set up a preprocessor as this is beyond the scope of this article. Instead I strongly recommend you use Codepen, which has all preprocessors built in. You just have to select the one you want in the CSS settings and you’re all set.

I personally like to use SASS/SCSS, but feel free to use any of the options available.

The best known feature of preprocessors is the ability to use variables. Preprocessor variables work just like javascript ones. You declare them and assign them a value once, then you can use and reuse them throughout your code. This is a great tool as it avoids repetition and gives you a lot more flexibility. Let's implement a few variables in our CSS. A good use for variables is to define colors.

A SCSS variable always starts with the $ sign:

$black: #20184E;

You can name it whatever you like, but it must start with $ and be assigned a valid CSS property.

Then you can use it like so:

background-color: $black;

You can see where this would come handy. If we later decide that we want to change this particular color, we only have to do it in one place and it will be reflected everywhere the variable is used in our code. Also when it comes to colors, it's a lot easier to remember the name of a variable you created than a RGB or HEX value.

I've added my new color variables to the top of the code so we can find them easily. Declaring variables in the global scope (as opposed to declaring them in a selector) will make sure we can use them everywhere.

$black: #20184E;
$head-color: #FBD671;
$background: #FEEE9D;
$tongue-color: #F15962;

Now we can change our css properties so they point to the variables instead of the hard coded HEX values.

Eg:

.mouth {
  width: 100%;
  height: 75px;
  bottom: 0;
  background-color: $black;
  border: 5px solid $black;
  border-radius: 10px 10px 150px 150px;
  overflow: hidden;
}

CSS now has native variables that pretty much make the preprocessor ones unnecessary. However, preprocessors offer a lot more than variables and are still extremely useful in many other ways.

SCSS also comes with many helper functions, including color functions. These functions are quite powerful as they allow you to manipulate colors very easily.

Let's have a look at the inset shadow applied to the head. Right now we are using a hard coded HEX value, which I've had to manually look up. We are going to use the darken function to generate this value instead:

.head {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: $head-color;
  box-shadow: inset -10px -10px 0px darken($head-color, 20%);
}

Basically, the function takes $head-color as a parameter then and increases the amount of darkness by 20%.

I love using color functions because not only do they eliminate the need to resort to some design software to generate colors, they also help with creating a more harmonious color palette for your illustration.

Another great feature of SASS is nesting. Nesting allows you to nest selectors within parent selectors in order to create shortcuts. It creates a better hierarchy and readability of your CSS, and avoids repeating selectors over and over.

For example

.pink {
  background-color: pink;
  .purple {
    background-color: purple;
  }

}

will be compiled to:

.pink { 
  background-color: pink;
}
.pink .purple { 
  background-color: purple;
}

SASS also offers the & selector, which basically refers to the parent selector. So

.pink {
  background-color: pink;
  &.purple{
    background-color: purple;
  }
}

will be compiled to:

.pink { 
  background-color: pink;
}
.pink.purple { 
  background-color: purple;
}

Using the & selector will not target child elements that have a class .purple like in the example above. It will target the parent element that has the classes .pink AND .purple.

Beware of too much nesting as it can make your code overly complex and less readable, which would be the opposite of what we're aiming for. As a rule, I tend to go for a maximum of 3 levels of nesting.

With this in mind, let's implement nesting in our code. For example:

.eye-group {
  top: 10px;
  left: 0;
  width: 150px;
  height: 50px;
}
.eye {
  background-color: $black;
  width: 30px;
  height: 50px;
  border-radius: 100%;
}
.eye-left {
  left: 15px;
}
.eye-right {
  right: 15px;
}

becomes:

.eye-group {
  top:10px;
  left:0;
  width: 150px;
  height: 50px;
  .eye {
    background-color: $black;
    width: 30px;
    height: 50px;
    border-radius: 100%;
    &.eye-left {
      left:15px;
    }
    &.eye-right {
      right:15px;
    }
  }  
}

Preprocessors are a great asset in building CSS images and will drastically speed up your workflow. They also offer more advanced options like function, loops, mixins etc. These will come in handy in more intricate illustrations, as we'll see in the last part of this series.

:before and :after

Until now, we’ve created a div for each shape in our smiley face. While this is totally fine, there is a way to reduce the number of HTML elements. This is where the pseudo-selectors :before and :after come in.

These pseudo-selectors come automatically with any HTML element you create. So for any element in your HTML, you’ll be given two extra containers within which to add content. Although they are not initially present in the DOM, you can target them with the content property, like so:

.some-class:before, .some-class:after { 
  content: "";
}

This property can be used to insert content such as text or images. In CSS illustrations, we don't want any of that, but we still want to use the selector, which we can do by using empty quotes. While it might look like a unnecessary step, this is the property that will ensure these selectors are available, so make sure it's there. A good way to not forget it, as well as avoiding repetition, is to assign it to all :after and :before elements by default:

*:before, *:after {
  position: absolute;
  content: '';
}

As you would expect, :before and :after depend on their parent for size and positioning.

Let's look at how we can use these in our code. Consider the .mouth element. It has a child: the .tongue element. We're going to replace the .tongue selector with an :after pseudo-selector:

.mouth {
  width: 100%;
  height: 75px;
  bottom: 0;
  background-color: $black;
  border: 5px solid $black;
  border-radius: 10px 10px 150px 150px;
  overflow: hidden;
  &:after {
    background-color: $tongue-color;
    width: 100px;
    height: 80px;
    border-radius: 50%;
    left:25px;
    top:30px;
  }
}

The same logic can be applied to replace the .pupil elements:

.eye-group {
  top: 10px;
  width: 150px;
  height: 50px;
  .eye {
    background-color: $black;
    width: 30px;
    height: 50px;
    border-radius: 100%;
    border: 5px solid $black;
    &:after {
      width: 10px;
      height: 15px;
      top: 5px;
      background-color: #FBD671;
      border-radius: 50%;
    }
    &.eye-left {
      left: 15px;
    }
    &.eye-right {
      right: 15px;
    }
  }
}

Now we can get rid of the .tongue and .pupil divs in the 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>
</div>

While this isn’t absolutely necessary, I find this practice helps to keep my code cleaner, and avoids overcrowding my HTML. Again, only use pseudo-selector when it makes sense to do so. (eg: to create an element visually related to its parent container).

HTML templating language

Another step we can take to improve our code is to use an HTML templating language. I like to use Pug, which is also built in to the Codepen editor.

Here’s how it works: Pug uses tag names to represent a full HTML element. For example, <div></div> will simply translate to div in Pug. It uses indentation to represent nesting, recreating the tree structure of HTML.

In CSS images, it is recommended to use div elements only, and assign them a class to be able to easily target them. The way to represent a div with a class in Pug is as follows:

Normal html:

<div class="container"></div>
```



Pug:



```html
div.container
```



Or, because `div` is the default tag name, it can be omitted:



```html
.container
```



I find this syntax to be much cleaner, and it allows me to focus on the class. Since I already know that all my elements are divs, I don't need any useless syntax polluting my code.

Let's convert our HTML to Pug:



```html
.head
  .face
    .mouth
    .eye-group
      .eye.eye-left
      .eye.eye-right
```



Much cleaner. 

Similarly to CSS preprocessors, there are many things you can do with Pug as it is powered by JavaScript: mixins, includes etc. When it comes to CSS images, one of the most powerful features is loops. We'll see a bit later how to use them.

Here's the final project in CodePen. You can see that none of our latest changes have affected the illustration at all.





Right, we’ve learned a lot already! How to create various shapes and assemble them into a cohesive illustration, how to use hacks to emulate more complex shapes, how to use preprocessors, templating languages and pseudo-selectors to improve our workflow and clean up our code. In the second part of this series, we'll practice these new concepts and build a CSS Polaroid. Then, we'll learn how to animate it.
 
[Part 2: Intro to CSS animations with a CSS Polaroid](https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them---part-2-1ao4)