Fall in Love With Single-Div Illustrations
A short tutorial on how to create images in CSS
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:
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:
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:
The forward slash separates background-position
values and background-size
values. The formal syntax requires the slash.
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!
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
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:
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:
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:
Lastly, we need to replace the red background with a transparent one:
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:
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.