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:
Top comments (6)
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!
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 !!
It’s awesome that you’re getting back into CSS drawing! The attention to detail on the face sounds great, and it’s cool that you experimented with shadows to add depth. Even if you’re not fully happy with the body and neck, it’s always part of the creative process. The save scare sounds like a nightmare, but I’m glad you recovered most of the work!
By the way, if you're into cartoons, you should check out BlackToon. It’s a new platform that’s gaining momentum quickly—might spark some creative ideas for your next project!
Really impressive, only code, logic and imagination. Nice done!
Talk about css skills.. Great work
Such a cool character. So creative with css.