This content originally appeared on Level Up Coding - Medium and was authored by Alvaro Montoro
I enjoy coding CSS drawings for fun. I find it relaxing and think it’s an excellent way to practice CSS. So today, I did a session and completed this drawing on CodePen:
I recorded the process (as I normally do), but this time was a bit different: I recorded myself speaking and explaining the process on video for the first time. Typically, I only show time-lapses of the process as I’m too self-conscious of my voice and accent. Anyway, here’s the video:
The process took longer than usual –I was describing each step out loud–, and followed these steps:
- Draw the basic head using an oval with border-radius.
- Add the ears (a flipped copy of each other with scaleX(-1)).
- Attach the parts of the face: mouth, eyes, nose…
- Add the neck (a simple square).
- Draw the hair using a bunch of box-shadow in three steps.
- Complete the body by setting a soft curve (border-radius) on a rectangle.
With that, the drawing had all parts done, but it looked too basic and flat. So to finish the CSS art, I added some details like shadows, freckles, some blushing on the cheeks…
—
And, if you don’t like long videos, or my voice is annoying or puts you to sleep (you wouldn’t be the first), here’s the time-lapse video I usually do:
If you enjoy this content, check the other videos on my channel too! :P
Drawing a cartoon of a boy with curly hair with HTML and CSS was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Alvaro Montoro
Alvaro Montoro | Sciencx (2021-08-07T22:10:00+00:00) Drawing a cartoon of a boy with curly hair with HTML and CSS. Retrieved from https://www.scien.cx/2021/08/07/drawing-a-cartoon-of-a-boy-with-curly-hair-with-html-and-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.