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:
It's also my first long video, and I know it is pretty amateur (not a great mic, using iMovie for editing, etc.) So, any constructive feedback on the video will be appreciated and welcomed.
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-shadowin 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... mostly using box-shadows and some filters.
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