How to Fall In Love With Single Div Illustrations
Tags: beginners, css, html, images
Published: 2021-01-08 08:10:25


I always admire people who create single-div illustrations in CSS. One div, multiple background layers, tone of CSS code and BOOM. Here you have an illustration. I always thought that it must be challenging, and I would never create such a thing. I was wrong. 😱

To create a simple image, you need to know only one thing: how backgrounds in CSS works. That's it. Really! 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.

## Exercise no. 1 - most simple illustration

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

{% gist https://gist.github.com/albertwalicki/63e0c74f505c6fedfae169766704ec49 %}

![CSS and HTML for the first example](https://dev-to-uploads.s3.amazonaws.com/i/4vz1j7lpced5vb4jvlxe.png)

Okay, what we have here? 100x100px rectangle with linear-gradient starting and ending with the same colour. Our first background has also defined `background-position: 0px 0px;` - on X-axis and 0px on Y-axis. It 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;` to prevent replying our layers.

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

Great, let's move on and add one more layer.

{% gist https://gist.github.com/albertwalicki/0443dddd002b7c245f315eb335c91112 %}

![CSS and HTML for the first example with an additional layer](https://dev-to-uploads.s3.amazonaws.com/i/826sdrmuwagnczvxmm8b.png)

And that's it! We have two linear-gradient layers on each other. Pay attention to 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.

{% gist https://gist.github.com/albertwalicki/0582126d04882e73ac3fef436477dd62 %}

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

![Linear gradient position and size](https://dev-to-uploads.s3.amazonaws.com/i/t5peuo5n0dokxtloob5v.png)

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

{% gist https://gist.github.com/albertwalicki/05b59e2bf587022b852a3f6fda6e7aa6 %}

This is much cleaner!

## Exercise no. 2 - small house

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

We need there a few layers:
- house front
- door
- roof left part
- roof right part
- window one and window two

{% gist https://gist.github.com/albertwalicki/364f6f5ff4d317a029b6be6b9bf411f2 %}

![Single div house](https://dev-to-uploads.s3.amazonaws.com/i/jqel530rboh8ha823sgp.png)

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

{% gist https://gist.github.com/albertwalicki/569d31e20f852286ae2440d0442c805c %}

![Linear-gradient with 50%/50% red and brown colours](https://dev-to-uploads.s3.amazonaws.com/i/5jc22zzshkto5innm16n.png)

Our goal is to create a triangle for our roof. Currently, our gradient has a 0deg angle, so let's change it. I would like to have a small roof slope angle, so I changed it to 12deg.

{% gist https://gist.github.com/albertwalicki/d7abbf796cdb30c2c4b7025433003a6f %}

![Linear-gradient with 50%/50% red and brown colours and 12deg angle](https://dev-to-uploads.s3.amazonaws.com/i/5zgc5on431hk917ftdbj.png)

---

I think you got it and you know what you should do now. 😉 Let's decrease the percentage of the gradient. I changed it to 19degs to have a perfect starting point on the right side.


{% gist https://gist.github.com/albertwalicki/87257ad0e704c7727bbe160a1bb46354 %}

![Almost done roof](https://dev-to-uploads.s3.amazonaws.com/i/pfrsmhtnvm155s37fss0.png)


----

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

{%gist https://gist.github.com/albertwalicki/de01416174487748a8afe7ba1a454974 %}

![Completed roof element](https://dev-to-uploads.s3.amazonaws.com/i/wrrw3vwtu3ghngjq4i4b.png)

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 one single-div image:

{% codepen https://codepen.io/walickialbert/pen/ZEpoMBj %}

It looks like a complex example. But if you create the previous one, you will be able to make identical as above. The only difference between my samples in the article and this one are units. Here I'm using the `vmin` unit to create a responsive image.

That's all for today. Thanks for reading! If you have any questions, feel free to DM me on Twitter - <a href="https://twitter.com/AlbertWalicki">@albertwalicki</a>



You can follow me on social media or sign up for my newsletter!
🐦 [Twitter](https://twitter.com/AlbertWalicki)
👨🏻‍💻 [Blog](https://albertwalicki.com)
📰 [Medium](https://albertwalicki.medium.com/)
💌 [Newsletter](https://albertwalicki.com/newsletter)
🦄 [Frontend Unicorn book](http://frontendunicorn.com/)