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โฆ
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.