Thread by @Prathkum

We can create cartoons using CSS as well 😉

Let's decode in this thread how we can create Ferb using few simple CSS steps. Let's go

🧵👇🏻

STEP 1: Create a Face of rectangular shape

- Create a rectangle and rotate it a little bit
- Give it a solid border without border-bottom
- Position it

STEP 2: Create Lips

- Make a small square
- Add bottom and left border
- Skew it so that it seems like a lip
- Add little bit of bottom-left radius to give it a more realistic look

STEP 3: Create a Ear

- Create a circle
- Give it a solid right and bottom border of color same as face
- Rotate it a bit in order to match the boundary of ear to face

STEP 4: Create a Nose

- Make a square
- Apply solid border of same color as of face
- border-right: none - in order to match it with the face boundary
- Position and rotate it so that it sync with the face

We need to extend the border of nose so that it looks like the nose is coming out of the face.

Again, we can do that using pseudo-elements

- Just create a small rectangle with same border and adjust it to the top border of nose

STEP 5: Create an eye

- For eye we need an oval shape (height > width)
- Apply black border with white background color
- Position it behind the nose

- Add a small black oval inside the eye

* You can create black oval using pseudo-elements ::before

- Add a even small white reflection in black oval(pupil) to give it a more realistic look

* You can create black oval using pseudo-elements ::after

STEP 6: Create second Eye

- Create second eye using same technique and code
- Just position it differently

STEP 7. Create hair spike

This is the easiest part in my opinions because all you need to make are just random spikes.

What I have done here is just created a border-top 20px and rotate it in order to give it a spike look.

STEP 8. Create hairs

Repeat step 7 and create multiple spikes so that they look like hair

Done 🤩
Wasn't it easy and fun. You should try it as well. It wil help you improving your CSS skills

You can access the whole source code here:

codepen.io/prathkum/pen/a…