Hello and welcome to Red Stapler channel.
In this tutorial, we're going to show you the basic of how to use CSS to draw any image
step by step from scratch.
Let's check it out!
Here is the our example page which I already set the background color and it's ready to
go.
And here is the model image for this tutorial.
First, let's create a wrapper and div for the face.
I'm going to place the image at the center of the screen using absolute position and
50% top/left.
Then for the face, I'll set the size to 300px. set background to almost white.
When use CSS to draw image, for me I'd prefer to use absolute position as it's easier to
control and fix the element position.
The key concept of CSS drawing is to creatively use border-radius to create curves and shapes.
Now we're working on the face so let's add one.
Also add top and left offset.
Next, I'm going to rotate it to the right angle.
My trick is to use browser dev tools to help you.
Then copy the CSS back when you got the correct value.
Then I'm going to create a rectangle div with the same color as background to mask the top
of the face.
Now I'm going to work on his hair.
Again we'll can create something similar with border-radius.
You can use online generator tools like this one to help you.
Then use the same technique to place it on the right position.
Now I'm going to use the same CSS but flip them horizontally to create the right hair.
Next, I'm going to work on the eyes.
Again same technique.
Only this time I'll add some box-shadow.
Next we'll create mouth.
This time, we'll use a little bit different technique.
We'll use solid border to create lips.
Now we'll remove the unwanted part by using clip-path property.
Again, we'll use my favorite helper tools Clippy to generate the right amount.
Then we'll do the same, for upper-lip.
Next, we'll work on the eyebrow using the same technique with mouth.
Next I'll create the handle with a simple rectangle.
Now we're going to work on the detail by creating mask to create curve on the handle, eyebrow
and mouth.
For the handle, I'll create curve rectangle with the same color as background and put
them on both sides.
For eyebrow and mouth, I'll create a circle and place them at the edges
Hope this should give you some ideas on how to start drawing image with pure CSS.
If you want to see more development tips and tutorial, please subscribe to our channel
for weekly update.
Thanks for watching and see you next time.
Bye!