CSS Cartoons
Tags: css, webdev, showdev
Published: 2024-02-08 09:00:00

---
title: CSS Cartoons
published: true
description: 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.
tags: css,webdev,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa95c4u6o8475xxwl3kz.png
canonical_url: https://alvaromontoro.com/blog/68051/css-cartoons-for-comicss-second-anniversary
published_at: 2024-02-08 09:00 +0000
---


<p>
<a href="https://comicss.art">comiCSS</a> 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.
</p>

<p>
comiCSS is a comic about CSS coded in CSS. Yes, <b>the comics and cartoons are all coded in HTML and CSS</b> (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?
</p>

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

<h2 id="cloud-developer">
  <a href="https://comicss.art/?id=116">Cloud Developer</a>
</h2>

<p>
<img src="https://alvaromontoro.com/images/blog/comicss-series-cloud-developer.png" alt="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; }" />
</p>

<p>Fun fact: the background color in this cartoon is "azure" for real.</p>

<hr/>

<h2 id="king">
  <a href="https://comicss.art/?id=117"> King</a>
</h2>

<p>
<img src="https://alvaromontoro.com/images/blog/comicss-series-king.png" alt="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; } }" />
</p>

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

<hr/>

<h2 id="phantom-of-the-opera">
  <a href="https://comicss.art/?id=118">Phantom of the Opera</a>
</h2>

<p>
<img src="https://alvaromontoro.com/images/blog/comicss-series-phantom-of-the-opera.png" alt="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; }" />
</p>

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

<hr/>

<h2 id="winner">
  <a href="https://comicss.art/?id=119">Winner</a>
</h2>

<p>
<img src="https://alvaromontoro.com/images/blog/comicss-series-winner.png" alt="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'; } }" />
</p>

<p><a href="https://front-end.social/@iamdtms@mas.to/111877220149537836" rel="external nofollow">Someone suggested</a> that the content should be "all" regarding <a href="https://www.youtube.com/watch?v=92cwKCU8Z5c" rel="external nofollow">ABBA's The Winner Takes It All</a>... and I hate that I didn't think about it myself. Still, I kept the trophy.</p>

<hr/>

<h2 id="dictator">
  <a href="https://comicss.art/?id=120">Dictator</a>
</h2>

<p>
<img src="https://alvaromontoro.com/images/blog/comicss-series-dictator.png" alt="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; } }" />
</p>

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

<hr/>

<h2 id="basketball-player">
  <a href="https://comicss.art/?id=121">Basketball Player</a>
</h2>

<p>
<img src="https://alvaromontoro.com/images/blog/comicss-series-basketball-player.png" alt="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'; }" />
</p>

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

<hr/>

<h2 id="astronaut">
  <a href="https://comicss.art/?id=122">Astronaut</a>
</h2>

<p>
<img src="https://alvaromontoro.com/images/blog/comicss-series-astronaut.png" alt="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; }" />
</p>

<p>I doubted between two selectors: <code>.astronaut</code> and <code>#MajorTom</code>. The CSS could describe <a href="https://www.youtube.com/watch?v=iYYRH4apXDo" rel="external nofollow">David Bowie's Space Oddity</a> but went with the more obvious option.</p>

<hr/>

<p>
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.
</p>
<p>
In the meantime, if you like these cartoons, visit the <a href="https://comicss.art">comiCSS</a> website and <strong>follow the account on <a href="https://twitter.com/comi_CSS" rel="external">Twitter</a> or <a href="https://www.linkedin.com/company/comicss/" rel="external">LinkedIn</a></strong> for updates. Or <a href="https://www.patreon.com/alvaromontoro" rel="external">become a supporter on Patreon</a> and help the project.
</p>