Skip to main content

Command Palette

Search for a command to run...

CSS is Dead!

comiCSS cartoon for March 20, 2023

Published
1 min read
CSS is Dead!

This is the comic I coded this week for comiCSS. It is a silly joke drawn with HTML and CSS (you can see the source code here):

The design for this cartoon was inspired by two different drawings that I saw on Dribble:

I also created an animated version of the comic (available in Spanish, too!), I hope you enjoy it:

NOTE: The animation only plays once. You may need to click on the "Rerun" button in the bottom right corner.

It was actually a lot of fun trying to animate the drawing. I normally don’t do much animation, mostly just drawing –and, of course, laying out content and website styling, I mean from a creative perspective–. So it was quite a challenge, to be honest.

I liked the result, but I’m not fully sold on things like eye movement or how Death restarts walking. I need to explore the animation properties and try to create new things that move and behave more naturally.

M

CSS is not deCSSed!

If you want to play around with Play/Pause for future animatics, you can check some of my pens, the ones that have a triangle-shaped play button in the middle. I needed my anims to be paused by default, because my animations have hundreds of objects flying around.

I also have another, yet untested theory on how to handle a CSS-only restart button. You could do it with a single checkbox - the animation being run when the input is checked, then revert to initial state after completing it. The problem is that you;d need to un-check the input and then check it again to re-run the animation. BUT you could also use two identical radio inputs. Clicking one radio input automatically unchecks the other. Only one of them would be showed at a time - the one that is not checked and needs to be clicked to re-run. Again, haven't tested it thoroughly enough to guarantee this'd work, but it's at least worth a try - if, that is, any of this makes sense to you or isn't too much of a bother.

1