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