DEV Community

Cover image for CSS Cartoons
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at

CSS Cartoons

comiCSS turned two this week. To celebrate, I published a daily cartoon in preparation for the big day. This is a collection of those seven cartoons.

comiCSS is a comic about CSS coded in CSS. Yes, the comics and cartoons are all coded in HTML and CSS (with a couple of SVG exceptions that also use CSS internally). And yes, I've been doing it for two years already. Why? Because it's fun, they can be silly, but, hopefully, they are also educational (some more than others)... and because, why not?

Here's the collection of cartoons I did for this week. I hope you like them.

Cloud Developer

Cartoon of a person using a computer with clouds in the background, next to a box with the following CSS code: .cloud-developer { background: azure; isolation: isolate; rest: none; stress: 100; content: none; }

Fun fact: the background color in this cartoon is "azure" for real.


Cartoon of a man with a beard, wearing a crown and holding a sceptre, next to a box with the following CSS code: .king { position: absolute; richness: 100; color: RoyalBlue; :first-child { all: inherit; } }

Fun fact: the king's robe is of "royal blue" color. This cartoon was the most successful on social media of all the cartoons in the series.

Phantom of the Opera

Cartoon of the phantom of the opera (a man with a cape and a mask hiding his face) holding a rose next to the following CSS code: #phantom-of-the-opera { mask:url(#face); backface-visibility:hidden; visibility:hidden; pitch:low; volume:soft; }

I liked this idea, but the implementation needed to be more fully there. I still think it has potential... maybe another day I can improve...


Cartoon of a person with an arm up holding a trophy while confetti falls round them. Next to the scene there's the following CSS code: #winner { order: 1; running: first; color: gold; &::after { content: 'trophy'; } }

Someone suggested that the content should be "all" regarding ABBA's The Winner Takes It All... and I hate that I didn't think about it myself. Still, I kept the trophy.


Dictator: a minimalistic cartoon of a man in military attire with medals and sun glasses, next to the following CSS code: .dictator { position: fixed !important; will-change: order !important; opacity: 0 !important; border: double solid !important; .country:has(&) :not(.supporter) { will-change: orphans, widows !important; translate: 100vmax 0 !important; } }

This cartoon is darker than what I'm used to publishing. I doubted about removing the reference to orphans and widows until the last minute.

Basketball Player

Basketball player: a minimalistic cartoon of a man spinning a basketball with one finger next to the following CSS code: .basketball-player { elevation: higher; min-height: 75in; max-height: 91in; will-change: position; play-during: url(#game); position: running(ball); flow: 'offense'; }

Fun fact: the tallest player to ever play on the NBA (to this day) was Manute Bol, who was 7'7"... or 91 inches. A small wink to a big player.


astronaut: a minimalistic cartoon of a person in an astronaut suit with many stars in the. background. Next to the following CSS code: .astronaut { elevation: above; isolation: isolate; flow-from: spaceship; flow-to: outerspace; transition: float; }

I doubted between two selectors: .astronaut and #MajorTom. The CSS could describe David Bowie's Space Oddity but went with the more obvious option.

I enjoyed this style and the format, and I will likely continue drawing cartoons like these... but at a slower pace. Maybe one weekly apart from the regular CSS/Web Development comic.

In the meantime, if you like these cartoons, visit the comiCSS website and follow the account on Twitter or LinkedIn for updates. Or become a supporter on Patreon and help the project.

Top comments (18)

best_codes profile image
Best Codes

Very thoughtful and funny! If you could make a newsletter (maybe a weekly comiCSS), then I would subscribe!

alvaromontoro profile image
Alvaro Montoro

I publish weekly comics on the site (that has an RSS feed), and also on Medium (open, not behind a paywall). But don't have a newsletter.

best_codes profile image
Best Codes

I'll have to check out your blog and RSS feed! Still, it would be great if I could get one by email every week. Just an idea…

Keep up the good work you do!

Thread Thread
angelod1as profile image
Angelo Dias

+1 for the newsletter idea :) I'd 200% sign up for that.

manuartero profile image
Manuel Artero Anguita 🟨 • Edited
.post {
  greatness: 100%;

.post::feedback {
  content: "Great!";
  color: green;
  font-size: 16px;
Enter fullscreen mode Exit fullscreen mode
anitaolsen profile image
Anita Olsen

This is truly AWESOME! Well done! ✨ ✨

alvaromontoro profile image
Alvaro Montoro

Thanks! 😊

chrisczopp profile image

very creative!

andypiper profile image
Andy Piper

It's a shame this is on Twitter, would be great to have it somewhere in the Fediverse (e.g. Mastodon)

alvaromontoro profile image
Alvaro Montoro
kvetoslavnovak profile image


souzanato profile image
Renato de Souza


dmodena profile image
Douglas Modena

I loved your comics! Congrats for the 2 years! 👏

michaeltharrington profile image
Michael Tharrington

This is amazing, Alvaro! 🙌

abrarali14 profile image
Abrar Ali

Are you kidding me🤨🤨
Is the topic you mentioned all works in real css🤔🤔🤔
If its I wouldn't learn any modern framework and i could make another thing just like you made ...
I will do it Inshallha

crazytonyi profile image

If you allowed invalid values, it could be:

#Tom {
    position: major;
Enter fullscreen mode Exit fullscreen mode

Also there's got to be a good joke for showing that a shirt option has been rendered but is not yet set.

baenencalin profile image
Calin Baenen

These are some real funny puns.
Good job making and compiling these into a post.

_ndeyefatoudiop profile image
Ndeye Fatou Diop

Speechless 😶

Some comments may only be visible to logged-in visitors. Sign in to view all comments.