Fall in Love With Single-Div Illustrations

A short tutorial on how to create images in CSS

Albert Walicki
Better Programming
Published in
4 min readJan 11, 2021

--

Single-div timelapse
Single-div timelapse by the author.

I’ve always admired people who create single-div illustrations in CSS. One div, multiple background layers, tons of CSS code, and boom! You have an illustration. I always thought that it must be challenging and I could never create such a thing. I was wrong.

To create a simple image, you only need to know one thing: how backgrounds work in CSS. That’s it. You don’t have to use CSS variables. They help to maintain clean code. It’s much easier to read those images with variables, but it’s not required.

Simplest Illustration

Let’s start with something straightforward. If you understand this example, you will be ready to go:

CSS and HTML for the first example
Single-div image
Our first single-div image!

OK, what we have here? A 100x100px rectangle with a linear-gradient starting and ending with the same colour. Our first background has also defined background-position: 0px 0px; on the X-axis and 0px on the Y-axis. This means that our background starts on the top left corner. Then we have background-size: 100px 100px;, which obviously defines the size of our purple colour. And the last one, background-repeat: no-repeat;, is to prevent replying to our layers.

Conclusion:

  • Our div is the solid #9B59B6 colour because we start and end the gradient with the same colour.
  • It is 100x100px.

Great, let’s move on and add one more layer:

CSS and HTML for the first example with an additional layer
First example with an additional layer
First example with an additional layer

And that’s it! We have two linear-gradient layers on each other. Pay attention to the layer order! Earlier layers are on top of the others. Think about it as a z-index.

I don’t like having properties broken into pieces, so let’s clean up a bit:

Background shorthands

The forward slash separates background-position values and background-size values. The formal syntax requires the slash.

Linear gradient position and size
Linear gradient position and size

If we have more background layers, things might be a little bit messy. You probably won’t remember if line 31 of the background goes for a window or maybe a fence.

This is much cleaner!

The previous example with CSS variables

Small House

You already know enough to create illustrations. To warm up before the final exercise, let’s make a small house.

We need a few layers:

  • Front of the house
  • Door
  • Left part of the roof
  • Right part of the roof
  • Window 1 and Window 2
HTML and CSS for single-div house
Single-div house
Single-div house

You can play with this house here on CodePen.

Triangles

The most challenging part of this house is to create triangles. Let’s split this code into pieces.

Let’s work on this example:

Linear-gradient with 50%/50% red and brown colours
Linear-gradient with 50%/50% red and brown colours

Our goal is to create a triangle for our roof. Currently, our gradient has a zero-degree angle, so let’s change it. I would like to have a small roof slope angle, so I changed it to 12 degrees:

Linear-gradient with 50%/50% red and brown colours and 12-degree angle
Linear-gradient with 50%/50% red and brown colours and 12-degree angle

I think you know what you should do now. Let’s decrease the percentage of the gradient. I changed it to 19 degrees to have a perfect starting point on the right side:

Triangle almost done

Lastly, we need to replace the red background with a transparent one:

HTML and CSS
Our roof element

And here we have a nice roof with a right angle.

A Complex Example of the House

I like throwing myself into the deep end. That’s why I created a detailed house as my first single-div image:

My first single-div image!

It looks like a complex example, but if you created the previous one, you will be able to make the complex version as well. The only difference between my samples in the article and this one is the units. Here, I’m using the vmin unit to create a responsive image.

That’s all for today. Thanks for reading!

Originally published at https://www.albertwalicki.com.

--

--

Albert Walicki
Albert Walicki

Written by Albert Walicki

Frontend developer, entrepreneur, biker. 👉 My Frontend book: www.frontendunicorn.com 👉 We build apps at www.hype4.com

Responses (1)