comiCSS

I recently spoke at a conference about a new CSS feature that, in my opinion, represents a significant shift in the language, and in how we need to think about it. My talk was part of the Front-End track, but many of the other sessions felt oddly monolithic, and not particularly front-end focused. T

Tomorrow is Monday so there will be two new things on the site: A new game (Branches, a CSS-version of NYT's Strands) A new comic (decorating this post, and shared with more information before) Even with some technical problems at home (the Internet service went off for a day), I have been able to c

A short comic strip to end the year 2025. What would happen if a comic character coded in HTML and CSS took one of those DNA tests that tells you about your origins and ancestry? The comic in itself has no 2% Tailwind (that was added later for comedic/dramatic purposes), but it does have some JavaSc

This was a silly idea I had. It is tangential to CSS and incredibly silly. Seriously, I'm almost ashamed, and at the same time, I like it, or at least the idea, but maybe not so much the implementation. Some notes about this comic: It is still a work in progress; I would like to clean the lines a li

This will be the cartoon for March 20. The design was inspired by La Santa Muerte by Christian Korn and Death & Coffee by David Espinosa. Then, I added a web development spin: many JavaScript developers complain about CSS's complexity and claim that their CSS-in-JS/utility class library is the solut

Rap battling (or battle rap) is a type of rap performance in which two or more rappers sing while throwing dialectic attacks and insults at each other. This cartoon plays with the homophones Rap and Wrap to make a silly joke with Flexbox and the flexbox-wrap property. I will complement the cartoon w

This week's cartoon is a "feel good" type of drawing. Simple and trying to focus on the message more than on the character or the rest of the content: life may have its ups and downs, but what matters is that you are moving... just like a cubic bézier function in a CSS animation. The cartoon actuall

Accessibility- and WebDev-Twitter is in turmoil after the shadowban and permanent suspension from the platform of a well-respected user (Manuel Matuzović). He is the creator of HTMHell, a website that collects bad HTML patterns and that includes recommendations. And one of his catchphrases is "A div

This week's cartoon is not strictly about CSS but about JavaScript and "JavaScript Developers" (a group of which I am a member, by the way.) I started coding it a long time ago (based on a previous one) but never found time to complete it with a heavier workload than usual. So not only I reused the

This variation of today's cartoon adds more to the "Float Week" content (today's and the one coming up on Thursday). The `clear` property defines how an element will be positioned (and if it needs to be moved below or cleared) depending on the floating elements that precede it. In the case of the ca

This comic is a "Cyanide & Happiness"-styled comic strip to illustrate a recent dream/nightmare... but coded in HTML and CSS. You can see the comic strip live and its source code on this private CodePen.

And we are back after the short break, with a new comic inspired by a similar idea I saw online (I can't recall where though, otherwise I'd cite it 😳) Here is a link to a private demo on CodePen.

According to Greek mythology, the Gods gave Pandora's husband a jar (later translated as a box) and asked her to take care of it and not open it. But her curiosity was stronger, and she opened the container releasing physical and emotional curses upon humanity... in this cartoon, Pandora opens the b

I like the simplicity of this cartoon... but because it uses `drop-shadow` (and combines it with some transforms), it doesn't look nice on Firefox or Safari 😓 It is a joke about Moses parting the waters of the Red Sea by using his flex abilities. The cartoon uses Flexbox and justify-content (the co

New cartoon for tomorrow: Not Important. The struggle of a Back-End Developer why their important code is not running. Link to a private CodePen demo.

This is an old idea I had, playing with the mix-blend-modes. The result is not as good as I wanted (and probably I delayed the idea because I suspected it wasn't going to be that great). You can see the code in this private Codepen demo. There, you can comment some code towards the end to get the al

This is an old Mathematical joke. I coded it in a little bit and, although it is not directly related to CSS or web programming, it was drawn with HTML and CSS. See the source code here: https://codepen.io/alvaromontoro/full/mdXmMzZ And a video of how it was done: https://www.youtube.com/watch?v=X7v

Here is the cartoon for Monday, May 23rd. You can see the live demo and code on this private CodePen (tons of code repeated due to copy-paste from one character to another... if only CSS had something that allowed setting the same styles for related elements 😅😳) I kind of like how these characters

What happens when a Roomba meets some CSS code? See it in this cartoon! CSSoomba! The Roomba vacuum cleaner is a single div. Check this private CodePen with the demo for the animated version.

The browsers are back... and they brought company! Or at least one of them did 😋 The browser party was crashed by some electron apps (that run on Chromium), for the irritation of Safari and the confusion of Chrome; who doesn't know if they are friends, relatives, or maybe children? The cartoon is s

This is more of an "educational" cartoon than anything. Trying to use humor (?) to teach about the CSS combinators and how they work: The children combinator (>) doesn't select any person on the bar but is thanked by a child. The adjacent sibling combinator (+) only treats the person directly next t

This demo is a simple idea, but I like how it looks (especially the top panel). The stitches have some texture and shadows (done with CSS gradients) to make them look more realistic. You can see the code in this private CodePen demo. The back of the cross-stitch pattern doesn't look that terrible. H

I was browsing Twitter earlier and saw a comic strip by Stephan Pastis (a cartoonist I like). So I decided to try and code a similar cartoon but make it Web Development related. And this image is the result. I used the image of Will Smith (instead of the horse that Pastis drew), and I'm a bit wary a

Next Thursday's cartoon will be a Throwback Thursday type of thing: an old cartoon making its way back to the front page. There are two versions of this cartoon. I personally like the second one best. The cartoon is a fake 3D. There's a video showing the drawing process (attached). Also, you can see

Continuing with the artsy demos, I created CSS versions of different artists for the next comic strip: Roy Lichtenstein Andy Warhol Wassily Kandinsky Piet Mondrian And I'm working on one more for tomorrow's comic strip (still a work in progress, see it attached to this post or on this private CodePe

A new mini-cartoon with the browser logos. This time it is mimicking a popular meme (hopefully it's not too bad or insensitive 😳) You have early access to the code too on this private CodePen link (the text for the speech bubbles can be found at the top of the CSS code, so you can easily personaliz

This week has been a bit hectic (I'm starting a new job next tomorrow!), so I'm a bit behind with the comics. I decided to go back to doing CSS stuff on Mondays, and lower the number of times I introduce the browser logos (I feel I was using them too much). Anyway, this is a tongue-in-cheek review o

A quick browser's cartoon. There's a new generation of browsers around, and they are really private about everything. Private link to the source code.

...More browser logos! Soon IE11 will reach its end-of-life, and it's time to pick the "New IE," the next browser that all developers will complain about... but which one will it be? Here's a private link to the source code.

This week I'm planning on releasing an extra picture for April Fools' Day (a day full of jokes and hoaxes). It's not a cartoon coded in CSS, but something silly and goofy (also related to IE11.) It is a spoof of the Microsoft website with an important announcement: the company is ditching Chromium a

Tomorrow's comic strip is now complete :) You can see the source code in this private CodePen.

This cartoon is still in progress, and the browser logos are back! The general idea of the cartoon is there (hopefully easy enough, although I'm having second thoughts about that): IE is trying a ghost costume for the shock of all the other browser logos. And in the end, it (or should IE be "he" or