Thread by @Prathkum

Few days ago we created Phineas using CSS and now it's time to create Ferb also in few simple steps😄

THREAD🧵

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

Now we need to create lips and ear. We will create them using pseudo-element ::before and ::after of "face" class div

i.e.

.face::before {
// code
}

.face::after {
// code
}

👇

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 have 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

CONTINUE...

- 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

SOURCE CODE:

codepen.io/prathamkumar/p…

EXTRA READING

🔹 https://developer .mozilla.org/en-US/docs/Web/CSS/transform-function/skew()