An Intermediate Guide to Pure CSS Images

Published in

Coding Artist

19 min readJan 7, 2017

What you’re getting into: 15 minute read. A well-detailed guide, building of my beginner’s guide, of creating a bit more challenging of a pure CSS image. I will still detail everything in a very understandable manner, trying my best to avoid the curse of knowledge, but I assume you have read my previous post.

Affiliate Links/Sponsored Post: Nada. I do recommend Brad Frost’s Atomic Design because I think it is legit, but it is not a sponsored post.

Self-promotion: We have a related email challenge called Daily CSS Images where you will be given prompts to make pure CSS images over 50 weekdays. We also have a 100% free video course on everything there is to know about pure CSS images.

Introduction

A recently wrote a post titled “A Beginner’s Guide to Pure CSS Images”. In that post, I went over how to really grasp the basic components that go into creating an image in pure CSS. My aim was to help people cross the bridge from “these pure CSS images look cool, but I don’t get it at all” to “this is awesome, I want to make some more!”.

Since releasing the post, I have been totally blown away by the feedback and what people were creating just by referencing my post. My personal favorite is this awesome Star Trek pen

It’s really awesome how learning to create pure CSS images can really give you an enthusiasm to start making more and stretching your creativity past the limits you thought existed.

Given this, I thought it would be beneficial to do another post on pure CSS images. This time around, I won’t spend nearly as much time explaining how they work. Instead, I am going to be going through a more difficult example, a pure CSS banner I used for my recent launch of Daily CSS Images, a 50-day pure CSS email challenge.

In this example, we are going to build on what was covered the last post, specifically:

The hierarchy of multiple CSS images to form a final image
Gradient Overlays

Just like last time, I am going to try my best to break things down in a way that doesn’t assume any piece of information that I have not yet explained.

So let’s get started again by breaking down our components for this pen.

Components

If you recall from my first guide, we have to really think about pure CSS images as a composition of various components and shapes that come together to form our final image.

The more complex pure CSS images get, however, we have to start thinking about the organization/hierarchy of our components.

I have recently been reading Atomic Design by Brad Frost. In his book, he gives a really great explanation of understanding the hierarchy of components in web design.

Brad breaks it down to atoms, molecules, and organisms. In terms of pure CSS images, I like to think of our atoms as our shapes. The shapes can’t be broken down any further. Without atoms, we wouldn’t have molecules or organisms. Likewise, without shapes, there’d be no final image.

Brad then highlights that molecules are groups of two or more atoms. Relating this to pure CSS images, I like to think of our molecules as our collection of shapes that work together to form parts of an image and do not stand alone or stand alone.

Here is where Brad’s explanation is much more precise at explaining a breakdown on design. In our example, we are going to be making a newspaper image. This newspaper image does not stand alone, meaning, it is not our final image, just a piece of it since we have another newspaper image and a ball image. Yet, it could stand alone since it is a complete image.

A subset of our newspaper is going to be line boxes. These line boxes are a composition of smaller rectangles; they can be broke down further. They are acting together to form part of our newspaper. Yet there is still the newspaper and the final image above them in terms of hierarchy.

Just so you aren’t too confused, here’s a figure that helps visualize what I’m describing:

The organisms in terms pure CSS images is going to be a composition of molecules that form an image that could stand alone. Like I was describing, the newspaper is an example of an organism. It is a collection of molecules (i.e. the line boxes) that is a completed image that could stand alone.

Our final image is all our organisms interacting together. Here’s another helpful visual:

Just to make sure there is no confusion, I am going to break down each atom, molecule, and an organism that makes up the image we are going to be creating.

Before we do that, I want to encourage you to read more about Atomic Design by Brad Frost. Just wait until after this post.

Ball

For our ball, we are going to have a blue circle and then the yellow circle and red start stacked in the center. Both circles and the star are our atoms. When they come together to form the ball, they are a molecule. Because this is a molecule. The organism is also the ball since there aren’t any other molecules.

Newspapers

In our newspaper, we see a picture box (molecule), white box (atom), and line boxes (molecule).

The line boxes (molecule) can be broken down into several silver rectangles (atoms).

The picture box is composed of the following atoms a blue square, a lighter blue rectangle, a yellow circle, two dark brown right triangles, and two light brown triangles.

Our other newspaper will be the same just with red shades instead of blue.

Final Image

1 newspaper with blue picture box (organism) 1 newspaper with a red picture box (organism) 1 ball in the center (organism)

HTML

As we discussed in the first guide, it’s important to understand the components and then move to organizing the CSS with proper nesting where needed.

Invisible Box
Our invisible box will be our canvas by which we position and size everything else. It is the parent of all other divs that will be styled to make our final image.

<body>

  <!-- Invisible box -->
  <div class="box">

  </div>


</body>

Ball
Because our ball is going to be at the center of the invisible box, I found it easiest to position and size of the newspapers around the ball. Ball is then a child of box but a parent of all other divs except for our color overlay (which will discuss at the very end of this post.)

<body>

 <!-- Invisible box -->
 <div class="box">

  <!-- Primary Color overlay -->
  <div class="overlay"></div>

    <div class="ball">

    </div>

 </div>


</body>

If you recall from the previous guide, we made a copy of the head of the koala to allow for proper layering. Here we will do the same with the ball, so there will be a ball-copy div that comes later which I grouped the entirety of the ball organism.

Ball Organism
Our ball organism is going to be a child of both ball and box. It contains the ball copy which I just mentioned which is the outer blue ball. As a child, we have the yellow circle and as a child of the yellow circle, we have a star.

Here is the HTML:

<body>

 <!-- Invisible box -->
 <div class="box">

  <!-- Primary Color overlay -->
  <div class="overlay"></div>

    <div class="ball">

      <!-- Ball Organism -->
      <div class="ball-copy">
        <div class="yellow-circle"> 
          <div class="star"></div> 
        </div>
      </div>
      <!-- End Ball Organism -->

    </div>

 </div>


</body>

Newspapers
Our red newspaper will be on the left of the ball. If is a child of box and ball. If we break down the newspaper, we have line boxes molecule and the picture box molecule.

<div class="box">
 <div class="ball">
 <div class="newspaper-left"> 

      <!-- Line box molecule -->
        <div class="bar-1"></div>
        <div class="bar-2"></div>
        <div class="bar-3"></div>
        <div class="bar-4"></div>
     <!-- End Line box molecule -->

      <!-- Picture Box Molecule--> 
        <div class="image-box-left">
          <div class="sun"></div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
           <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          <div class="image-bar-left">
          </div>
        </div>
      <!-- End Picture Box -->

      </div>

      <!-- Ball Organism Goes Here -->
 </div>
</div>

Again both molecules can be broken down, our line boxes molecule with all its atoms:

<!-- Line box molecule -->
        <div class="bar-1"></div>
        <div class="bar-2"></div>
        <div class="bar-3"></div>
        <div class="bar-4"></div>
<!-- End Line box molecule -->

Also our picture box molecule with all of its atoms:

<!-- Picture Box Molecule--> 
        <div class="image-box-left">
          <div class="sun"></div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
           <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          <div class="image-bar-left">
          </div>
        </div>
<!-- End Picture Box -->

We will have the same for our right newspaper organism, just a few different classes (in bold) since they will have a different color:

<!-- Blue Newspaper Organism -->
      **<div class="newspaper-right"> **
      <!-- Line box molecule -->
          <div class="bar-1"></div>
          <div class="bar-2"></div>
          <div class="bar-3"></div>
          <div class="bar-4"></div>
       <!-- End Line box molecule -->   

       <!-- Picture Box Molecule -->
        **<div class="image-box-right"> **           
          <div class="sun">
          </div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
          <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          **<div class="image-bar-right">**
          </div>
       </div>
       <!-- End Picture Box Molecule -->

      </div>
<!-- End Newspaper Organism -->

In total we should have:

<body>

<div class="box">
 <div class="ball">
  <div class="newspaper-left"> 

      <!-- Line box molecule -->
        <div class="bar-1"></div>
        <div class="bar-2"></div>
        <div class="bar-3"></div>
        <div class="bar-4"></div>
     <!-- End Line box molecule -->

      <!-- Picture Box Molecule--> 
        <div class="image-box-left">
          <div class="sun"></div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
           <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          <div class="image-bar-left">
          </div>
        </div>
      <!-- End Picture Box -->

  </div>
  <!-- End Newspaper Organism -->

      <!-- Ball Organism -->
      <div class="ball-copy">
        <div class="yellow-circle"> 
          <div class="star"></div> 
        </div>
      </div>
      <!-- End Ball Organism -->

      <!-- Blue Newspaper Organism -->
      **<div class="newspaper-right"> **
      <!-- Line box molecule -->
          <div class="bar-1"></div>
          <div class="bar-2"></div>
          <div class="bar-3"></div>
          <div class="bar-4"></div>
       <!-- End Line box molecule -->   

       <!-- Picture Box Molecule -->
        **<div class="image-box-right"> **           
          <div class="sun">
          </div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
          <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          **<div class="image-bar-right">**
          </div>
       </div>
       <!-- End Picture Box Molecule -->

      </div>
  <!-- End Newspaper Organism -->

 </div>
</div>

</body>

CSS

I first want to point out that if you have been peeping at my original pen. You can ignore the SCSS variables (i.e $time) and function. I will not be discussing this in this article, but I have written about them recently here if interested after finishing this post.

For now, let’s break down the styling. I will go into more detail when I feel it is needed since I’m assuming you read my first guide.

Body

body{
  background: linear-gradient(rgba(72%, 98%, 87%, 0.9), rgba(72%, 98%, 87%, 1.0));
}

For our body, we are simply going to add a linear-gradient background.

A linear gradient uses the following syntax:

background: linear-gradient(rgba value1, rgba value2)

The syntax for the rgba values is (percent, percent, percent, opacity). I personally use a Chrome plug-in called Colorzilla to easily get a rgb value which I slightly tweak for our rgba value.

A rgb value will be like this:

rgb(19%, 19%, 19%)

To tweak this we just add the “a” after “rgb” and add the opacity, like so:

rgba(19%, 19%, 19%, 0.8)

For this example, we will put the rgba values together to form our linear-gradient as the background like so:

body{
  background: linear-gradient(rgba(72%, 98%, 87%, 0.9), rgba(72%, 98%, 87%, 1.0));
}

Box

Our box will not change since the previous guide, we keep the following:

.box{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
}

Overlay

Since we just discussed linear-gradients, now the overlay will make some sense. The overlay will work similar to our ball-copy, our head-copy from our last example, in that we are making a clone by giving a weight and height of 100%. This will make another box like our invisible box. The reason we need to add this is because we need this overlay to be on the very top of everything else.

We add z-index: 5 (highest layer) to make sure it does get to the top.

Here’s the code:

.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(72%, 98%, 87%, 0.75), rgba(72%, 98%, 87%, 0.75));
  z-index: 6;
}

Since we have a lot of styling left, let’s set the background to none and change it back at the end.

Ball

We need to center the ball in the middle of the box, so we will position it absolutely, guesstimate a right size, and dead center it by using our formula which will give us our left and right values.

.ball{
  position: absolute;
  width: 50%;
  height: 68%;
  top: 16%;
  left: 25%;
}

As a refresher, we got the top and left for a centered position with the follwoing formula:

(100–68)/2 = 16 -> top: 16% 
(100–50)/2 = 25 -> left: 25%

Once we have the ball centered, we make a clone of the ball to allow for proper layering.

Next, we just add the transformer to make it a circle, border-radius: 50%, and our z-index of 1 (bottom layer).

.ball{ 
position: absolute; 
width: 50%; 
height: 68%; 
background: #127F9E; 
border-radius: 50%; 
top: 16%; 
left: 25%;
 z-index: 1; 
}

The only thing to note is the z-index of 2 to give it a higher layer.

Ball Organism

We first make a ball-copy, which is the outer blue circle, for layering purposes:

.ball-copy{
  width: 100%;
  height: 100%;
  position: absolute;
  background: #127F9E;
  border-radius: 50%;
  z-index: 2;
}

Next, we have to add our yellow circle which is a child of ball-copy:

.yellow-circle{
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  position: absolute;
  background: #FCC472;
  border-radius: 50%;
  z-index: 3; 
}

We want it slightly smaller than the blue circle so we give a height and weight of 80%. We position it absolutely using the dead center formula which gives us 10% for both top and left.

We again transformed it with border-radius: 50%, added our yellow background and gave it a higher layer by doing z-index: 3.

Four our star:

.star{ position: absolute; width: 60%; height: 60%; top: 20%; left: 20%; background: #D44D4F; -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); z-index: 4; }

We know we want it a decent size so 60% works well. Again we can dead center this, give it a background, specify a higher layer of 4, and we then transform it.

Since it is not a rectangle, square, or circle, we will need a clip-path value. We go to out handy dandy Clippy tool:

Newspaper Organisms

.newspaper-left{
  position: absolute;
  bottom: -5%;
  left: -45%;
  background: #FDFFFF;
  width: 65%;
  height: 70%;
  z-index: 0;
  border-radius: 20px;
}

Starting with our left, we need to remember we are sizing and positioning this by percentage relative to the ball. First, we give it a decent size:

width: 65%;
height: 70%;

We want it a bit lower than the ball so we used a bottom: -5%. We also want it to stick out to the left of the ball so we used left: -45%. Going by trial and error if it doesn’t look right.

bottom: -5%;
left: -45%;

We give a white-ish background and then a z-index: 0 since we want it to be behind the ball by being the lowest layer.

The most important note to remember here is that we use a transformer of border-radius, but this time by px since we just want a slight round:

border-radius: 20px;

Again we have: ~~~~ .newspaper-left{ position: absolute; bottom: -5%; left: -45%; background: #FDFFFF; width: 65%; height: 70%; z-index: 0; border-radius: 20px; } ~~~~

With this down, we move on to the line boxes molecule:

.bar-1{
  position: absolute;
  top: 15%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.bar-2{
  position: absolute;
  top: 35%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.bar-3{
  position: absolute;
  top: 55%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.bar-4{
  position: absolute;
  top: 75%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}

These should be pretty easy to grasp. The only thing to keep in mind here is that we want two bars, bar-1 and bar-2, to just as far as right as the rest, but not as wide so we can make room for our picture box molecule.

We also give them all a z-index of 5 to define the right layer level.

Picture Box

.image-box-left{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #D44D4F;
  top: 15%;
  left: 10%;
}

The picture box is worthy of its own section since it is a tad more complex.

In terms of atoms, the first one we will need to style is the image-box-left. This box will contain more atoms that are children.

This is a simple square so we just give an appropriate size and position relative to the white newspaper box. After that, we just add a blue background.

Next, we style the child atom, sun.

.sun{
  position: absolute;
  width: 15%;
  height: 15%;
  background: #F9CB49;
  border-radius: 50%;
  top:15%;
  right: 45%;
  z-index: 5;
}

Here we make a small yellow circle positioned and sized relative to the image-box-left. By now, this should be easy to understand without much explanation.

Now let’s do our small mountain which is composed of two right triangles facing opposite directions.

.small-mountain-left{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 24%;
    height: 40%;
    background: #AF7B53;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}

Small-mountain-left is our left triangle with a darker shaded brown background. The only thing to note is our transformer which we again use Clippy.

Just make sure to drag the top point of the triangle all the way to the right when using the tool.

Our small-mountain-right will be the exact same just a different transformer:

.small-mountain-right{
  position: absolute;
  bottom: 0%;
  left: 22%;
  width: 24%;
    height: 40%;
    background: #AB936D;
    -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}

Mountain-left and mountain-right are just going to change in height, width, position like so:

.mountain-left{
  position: absolute;
  bottom: 0%;
  right: 34%;
  width: 34%;
    height: 60%;
    background: #AF7B53;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}.mountain-right{
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 35%;
    height: 60%;
    background: #AB936D;
    -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}

Last we do a simple rectangle on the bottom that is the full width of the picture box using a lighter shade of blue:

.image-bar-left{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #DD7677;
  bottom: 0%;
}

We should now have completed our left newspaper organism:

.newspaper-left{
  position: absolute;
  bottom: -5%;
  left: -45%;
  background: #FDFFFF;
   width: 65%;
  height: 70%;
  z-index: 0;
  border-radius: 20px;
}.bar-1{
  position: absolute;
  top: 15%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.bar-2{
  position: absolute;
  top: 35%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.bar-3{
  position: absolute;
  top: 55%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.bar-4{
  position: absolute;
  top: 75%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.image-box-left{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #D44D4F;
  top: 15%;
  left: 10%;
  animation: pulse 5s infinite;
}.image-bar-left{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #DD7677;
  bottom: 0%;
}.small-mountain-left{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 24%;
    height: 40%;
    background: #AF7B53;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}.small-mountain-right{
  position: absolute;
  bottom: 0%;
  left: 22%;
  width: 24%;
    height: 40%;
    background: #AB936D;
    -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}.mountain-left{
  position: absolute;
  bottom: 0%;
  right: 34%;
  width: 34%;
    height: 60%;
    background: #AF7B53;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}.mountain-right{
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 35%;
    height: 60%;
    background: #AB936D;
    -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}.sun{
  position: absolute;
  width: 15%;
  height: 15%;
  background: #F9CB49;
  border-radius: 50%;
  top:15%;
  right: 45%;
  z-index: 5;
}

With the left newspaper done, we just need to add the style for our right newspaper, as well as its picture box and bottom rectangle since it has a different color than on the left newspaper.

.newspaper-right{
  position: absolute;
  top: -5%;
  right: -45%;
  background: #FDFFFF;
  width: 65%;
  height: 70%;
  z-index: 4;
  border-radius: 20px;
}

Newspaper-right only will change by having a higher z-index since we want it above the ball, we also just change bottom to top and left to right.

Image-box-right just changes background to red:

.image-box-right{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #127F9E;
  top: 15%;
  left: 10%;
  animation: pulse2 5s infinite;
}

Same with our image-bar-right (bottom rectangle) which needs a tad lighter shade of red.

.image-bar-right{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #75CEF2;
  bottom: 0%;
}

Overlay Added Back

Now let’s update the overlay which we set to a background of none back to our linear-gradient value.

background: linear-gradient(rgba(72%, 98%, 87%, 0.9), rgba(72%, 98%, 87%, 1.0));

Our CSS is now complete:

body{
  background: linear-gradient(rgba(72%, 98%, 87%, 0.9), rgba(72%, 98%, 87%, 1.0));
}.box{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
}.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(72%, 98%, 87%, 0.75), rgba(72%, 98%, 87%, 0.75));
  z-index: 6;
}.ball{
  position: absolute;
  width: 50%;
  height: 68%;
  background: #127F9E;
  border-radius: 50%;
  top: 16%;
  left: 25%;
  z-index: 1; 
}.ball-copy{
  width: 100%;
  height: 100%;
  position: absolute;
  background: #127F9E;
  border-radius: 50%;
  z-index: 2;
}.yellow-circle{
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  position: absolute;
  background: #FCC472;
  border-radius: 50%;
  z-index: 3; 
}.star{
  animation: spin();
  position: absolute;
  width: 60%;
    height: 60%;
  top: 20%;
  left: 20%;
    background: #D44D4F;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}.newspaper-right{
  position: absolute;
  top: -5%;
  right: -45%;
  background: #FDFFFF;
  width: 65%;
  height: 70%;
  z-index: 4;
  border-radius: 20px;
}
.newspaper-left{
  position: absolute;
  bottom: -5%;
  left: -45%;
  background: #FDFFFF;
   width: 65%;
  height: 70%;
  z-index: 0;
  border-radius: 20px;
}.bar-1{
  position: absolute;
  top: 15%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.bar-2{
  position: absolute;
  top: 35%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.bar-3{
  position: absolute;
  top: 55%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}.bar-4{
  position: absolute;
  top: 75%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.image-box-left{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #D44D4F;
  top: 15%;
  left: 10%;
  animation: pulse 5s infinite;
}.image-box-right{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #127F9E;
  top: 15%;
  left: 10%;
  animation: pulse2 5s infinite;
}.image-bar-left{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #DD7677;
  bottom: 0%;
}.image-bar-right{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #75CEF2;
  bottom: 0%;
}.small-mountain-left{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 24%;
    height: 40%;
    background: #AF7B53;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}.small-mountain-right{
  position: absolute;
  bottom: 0%;
  left: 22%;
  width: 24%;
    height: 40%;
    background: #AB936D;
    -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}.mountain-left{
  position: absolute;
  bottom: 0%;
  right: 34%;
  width: 34%;
    height: 60%;
    background: #AF7B53;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}.mountain-right{
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 35%;
    height: 60%;
    background: #AB936D;
    -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}.sun{
  position: absolute;
  width: 15%;
  height: 15%;
  background: #F9CB49;
  border-radius: 50%;
  top:15%;
  right: 45%;
  z-index: 5;
}

Further Practice

Hopefully, this guide helps by going through a slightly more challenging example. I think breaking down our components into atoms, molecules, and components are probably the most beneficial.

If you are looking for more practice, then you will definitely want to consider doing the Daily CSS Images Challenge.

This is a 50-day email challenge I recently launched. Each weekday for 50 days, you will be given a challenge to code a pure CSS image. I don’t want to spoil but there’s a lot of fun things you will get to code ranging from a robot, tiger, Nintendo 2DS, and more. It’s a 100% free and 100% free of spam.

Update (3/14/17): We also added a 100% free video course on making pure CSS images.

Each week we will pick the best of the best and share on the email list and social media. Just remember to use #dailycssimages or @dailycssimages to get our attention via Twitter when sharing what you made.

By the end of this, you will hopefully have great practice under your belt, a wonderful collection for your resume, and get promotion out of it.

Cheers to coding!

Mike Mangialardi