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
In the next 3 minutes, you will be able to tackle CORS errors much more effectively.
CORS is not rocket science.
It's the biggest pain for developers because the majority of us don't know its core concept.
Let's try to build a solid fundamental.
Stands for Cross-Origin Resource Sharing.
It is a security feature implemented by web browsers (almost all) that controls how web pages from one domain can request resources hosted on another domain.