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

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

---

King

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

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

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

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

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

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.

Comments

[Best Codes]

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

[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]

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!

[Angelo Dias]

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

[Manuel Artero Anguita 🟨]

.post {
  greatness: 100%;
}

.post::feedback {
  content: "Great!";
  color: green;
  font-size: 16px;
}

[Anita Olsen 💜]

This is truly AWESOME! Well done! ✨ ✨

[Alvaro Montoro]

Thanks! 😊

[chris-czopp]

very creative!

[Andy Piper]

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

[Alvaro Montoro]

I post them under my personal account on front-end.social.

[kvetoslavnovak]

:-)

[Renato de Souza]

Super!

[Douglas Modena]

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

[Michael Tharrington]

This is amazing, Alvaro! 🙌

[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

[Anthony]

If you allowed invalid values, it could be:

#Tom {
    position: major;
}

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

[Calin Baenen]

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

[Ndeye Fatou Diop]

Speechless 😶