Drawing a cartoon in CSS

Alvaro Montoro - Dec 21 '20 - - Dev Community

It's been a while since the last CSS drawing I coded —or at least it feels like a long time—, and it felt good to draw something even if it was small.

I started strong, I really like how the face looks, adding shadows to create the impression of lines changing thickness, and actual light/shade tones... but then I kind of lost steam and not really happy with the body and neck. May need to revisit that part.

Here you can see a time-lapse video of the process:

In the video you can see how I never saved (big mistake) and at the end, when I clicked on "Save", something happened and the browser went back to the previous page... losing all the unsaved work!

...or so I thought (when I stopped the recording in panic). Luckily for me, going to the next page restored most of the code and was able to recover the drawing.

And here it is the code, you can see it on this demo:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player