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
π§΅ππ»
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
- 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
- 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
- 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
- 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
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
- 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
* 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
* 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
- 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.
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
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
Wasn't it easy and fun. You should try it as well. It wil help you improving your CSS skills
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
