DEV Community

loading...
Cover image for Drawing a cartoon in CSS

Drawing a cartoon in CSS

alvaromontoro profile image Alvaro Montoro ・1 min read

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:

Discussion (5)

pic
Editor guide
Collapse
ash_bergs profile image
Ash

I love coding in CSS and I didn't know this was a thing, though I've thought about the logistics of trying it before. These are some serious skills! Did you learn by doing?

I can't wait to try this out, thank you for writing!

Collapse
budski82 profile image
William Rutkowski

Thanks for sharing your work and talents. I asked before in a different post you supplied. Is this just experience over time. Or is there a/any additional resources you can provide. That helped your CSS skills to progress to this level? I would like to read about it, to help retain i. Rather then just copy and pasting someone else`s projects to modify. Great stuff and thanks again .....eye opening stuff. I am also learning browser based 2D game design and wanted to do clay-mation type effects. I was stumped on how to proceed and this just helped solved that. And wondering if you could use the z-axis to "thicken" features. I will find out !!

Collapse
casiimir profile image
casiimir

Really impressive, only code, logic and imagination. Nice done!

Collapse
kalashin1 profile image
Kinanee Samson

Talk about css skills.. Great work

Collapse
waylonwalker profile image
Waylon Walker

Such a cool character. So creative with css.