Inspired by @Chrizzly42 and his CSS image, I created another single-div illustration! I will explain to you how to do this. 🚀

Thread 🧵 #100DaysOfCode #CSS #CodeNewbies 1/11
Let's start with defining the boundaries.
Our image have 245px width and 335px height. 2/11
Let's start with defining the boundaries.Our image have 245px width and 335px height. 2/11
Let's start with defining the boundaries.Our image have 245px width and 335px height. 2/11
First of all, we need to create a forehead. It's a radial-gradient a little bit bigger than our boundaries. 3/11
First of all, we need to create a forehead. It's a radial-gradient a little bit bigger than our boundaries. 3/11
First of all, we need to create a forehead. It's a radial-gradient a little bit bigger than our boundaries. 3/11
Now we need to hide almost half of the circle. 4/11
Now we need to hide almost half of the circle. 4/11
Now we need to hide almost half of the circle. 4/11
Let's create a ::before element for a face. A simple rectangle with border-radius. Don't forget to change the colour to black. 😉 5/11
Let's create a ::before element for a face. A simple rectangle with border-radius. Don't forget to change the colour to black. 5/11
Let's create a ::before element for a face. A simple rectangle with border-radius. Don't forget to change the colour to black. 5/11
Two radial-gradients for eyes 6/11
Two radial-gradients for eyes 6/11
Two radial-gradients for eyes 6/11
Two linear-gradients for nose 7/11
Two linear-gradients for nose 7/11
Two linear-gradients for nose 7/11
Almost over! Now I created ::after pseudoelement to make a jaw. Another rectangle with border-radius 8/11
Almost over! Now I created ::after pseudoelement to make a jaw. Another rectangle with border-radius 8/11
Almost over! Now I created ::after pseudoelement to make a jaw. Another rectangle with border-radius 8/11
Four linear-gradients for teeths 9/11
Four linear-gradients for teeths 9/11
Four linear-gradients for teeths 9/11
And that's it! Our skull is finished! If you want to read more about single-div images, check out my article:
https://www.albertwalicki.com/fall-in-love-with-single-div-images

Here I'm creating a simple house and explain how to create background-triangles.
10/11
How to Fall In Love With Single Div Illustrations | Albert Walicki

A short tutorial on how to start with single div images. To create a simple image, you need to know only one thing: how backgrounds in CSS works.

https://www.albertwalicki.com/fall-in-love-with-single-div-images
Thread created with @threadstartio 💕 by @scholz_felix
All code: https://codepen.io/walickialbert/pen/LYRorrW
Single-div Skull

...

https://codepen.io/walickialbert/pen/LYRorrW
You can follow @AlbertWalicki.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
Those who think consciousness raising & movement building are disconnected, or even a distraction from electoral politics have not paid attention to the history of social change.In this thread, we
Read more
The 2020s will be known as the Remote Work decadeA few predictions of what is likely to emerge[ a thread ] Third Space: Office and Working from Home will
Read more
1/29: Have you ever had a concept explained to you that helps frame complex issues you’ve been wrestling with and opens your eyes to new possibilities? A concept that I
Read more
By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.