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
Top comments (0)