DEV Community

Cover image for CSS Cartoons
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

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.


King

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...


Winner

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

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

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)

Collapse
 
best_codes profile image
Best Codes

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

Collapse
 
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.

Collapse
 
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.

Collapse
 
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
Collapse
 
anitaolsen profile image
Anita Olsen

This is truly AWESOME! Well done! ✨ ✨

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks! 😊

Collapse
 
chrisczopp profile image
chris-czopp

very creative!

Collapse
 
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)

Collapse
 
alvaromontoro profile image
Alvaro Montoro
Collapse
 
kvetoslavnovak profile image
kvetoslavnovak

:-)

Collapse
 
souzanato profile image
Renato de Souza

Super!

Collapse
 
dmodena profile image
Douglas Modena

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

Collapse
 
michaeltharrington profile image
Michael Tharrington

This is amazing, Alvaro! 🙌

Collapse
 
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

Collapse
 
crazytonyi profile image
Anthony

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.

Collapse
 
baenencalin profile image
Calin Baenen

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

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Speechless 😶

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