comiCSS

Developers love classes. They sprinkle them everywhere: .hidden, .loading, .active... But HTML already gives us attributes that do the job better. Attributes that are semantic, standardized, and supported across browsers. So, why reinvent the wheel? Let the browser handle the heavy lifting, and impr

Following the July 1st message sent by Sony and PlayStation, the CSS Working Group has decided to adopt a similar approach. One that all web developers are sure to support. As developers preferences and the broader web development industry continue to shift away from digital formats toward physical

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

Last Wednesday, I shared a large CSS-themed crossword. For next Wednesday, I coded a new crossword, and this time, it is HTML themed! Patreon members get early access to a private version of the game. It is not publicly shared on the site, so the only way to access it is through that link. It will b

As part of the comiCSS weekly games, we released a large CSS-themed crossword! It has 89 different CSS terms: from properties to values, keywords and functions. Enjoy! Here's how you can play: Visit the game online, just fill in the crossword. Printing the attached pages in PDF :) Most of the defini

Over the past week, I have coded a series of optical illusions using CSS only (and some HTML for one of them, but most of them are CSS only). I created a collection on CodePen with 40 of them, although the number may grow in the next few weeks. Many of them play with color effects, some others are a

Tomorrow's comic is about Tailwind (again 😅). Specifically, about how utility classes can sometimes get out of hand, leaving developers "stuck" in a classy situation. Tailwind offers a way to simplify things by combining multiple utility classes with @apply. The funny part is that even Tailwind's o

Tomorrow's cartoons are weird CSS word associations and extensions. It starts with a drawing and a regular English word then it expands to a CSS property-value pair that is applied to the cartoon. There are a few of them, but I only coded 5, because it's one of those ideas for comics that I think ar

A new toggle switch component added to the collection. This time I was browsing online and saw an ad (for a VPN or something) that had this image of a switch. It looked interesting, so I took a screenshot for later and then build it. You can find the code and live demo on CodePen: https://codepen.io

As mentioned in a previous post, tomorrow's post will be a game and not a cartoon. You can get early access to the game on this private CodePen. It has 50 movies hidden in 50 CSS rules. Most of them are fairly simple, so even people that are not much into films will likely guess them (maybe it's too

I haven't shared any terrible dad jokes in a while... did you think the nightmare was over? Think again! This time, I'm back with a whole batch of Halloween-themed Web Developer Dad Jokes. You can check out the previous editions of this terrible series of web developer dad jokes: Bad CSS-Dad Jokes B

Later this week, I'll be adding to the site a cartoon I shared before on social media (and here... but I forgot to include it on the site). It's related to the old English word "latibulate," which basically means to make oneself small and hide in a corner, trying to go unnoticed and avoid reality. A

My website has a "zig-zagging" timeline with my work history –which, by the way, needs to be updated... both that work history and the website in general. But that's a different story–, and a person shared some interest in it. The timeline is built with grid and it is so old, that to avoid issues wi

This is a longer comic than usual, and I was planning on publishing it in a few weeks, but looking at the news cycle, I thought that just as well it could be published now. If it is familiar, it's because it is inspired on a comic strip from Pearls Before Swine (by Stephan Pastis), in which Pig floa

I coded this using HTML and CSS, and some of the trigonometric functions –It uses hypot() to calculate the size of the hypotenuse, and atan() to calculate the rotation degree. TIL a couple of things while coding it: It is super easy to add Greek letters using HTML entities, it's just their name! (e.

I did another piece of CSS Art, this time it is a monster or a cartoon character (depends on how you look at it.) Of this cartoon, I liked doing the head/face. It's kind of a squircle (combination of square and circle with rounded borders and edges) and a single HTML element. In the past I achieved

Yesterday, I wanted to create something and ended up with a weird centaur slider. Move the thumb and see how the creature changes. Considering I used an SVG for the human/centaur/horse, I should look into transforming the paths instead of using CSS to transition them. It will make the animations smo

I'm currently reading John Green's book "Everything is Tuberculosis" and I'm really enjoying it... so, in between chapters, I took a stab at recreating the cover with a CSS twist. You can find the source code on https://codepen.io/alvaromontoro/pen/myybgWm

Over the past few weeks, I have created some input ranges that look completely different even when they are the same underlying HTML –Thanks, CSS! I shared them on CodePen, and now I wrote an article about the process. It's a bit long (which is funny as it doesn't get into much technical details 😳)

I normally do flat drawings or 3D demos with CSS, but on this occasion, I tried something slightly different. I tried to simulate the clay effect that people have on some websites with CSS. A faux 3D using gradients and shadows, and shared the live coding process on YouTube. Drawing with CSS: Clay C

The other day I completed a fun side project adding perspective to one of my favorite paintings: The Wandered Above the Sea of Fog. It was a simple process with HTML and CSS (just adding layers with different images and Z-translations); what was more time-consuming was dividing the painting into lay

I worked on this concept for an image gallery the other day. I was trying to go for a "kaleidoscope" type of look, with the images merging and blending into each other and animating on hover. However, I feel it only got there halfway: I like the idea but am not in with the execution. Things I like:

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

I did some single-element CSS art. I wanted to do a cartoon chibi-style, but it soon became my "manga-style." I did several variations, trying different styles for the hair. The colors I picked randomly reminded me of a picture of Sara Soueidan, so I tried (unsuccessfully) to turn the hair into a ha

A few years back, I published a library of CSS styles. The goal was to build something simple and small that didn't interfere with the developer's styles but converted a plain HTML page/site into something lovely. That's how Almond.CSS was born. A CSS library with some ideals (or restrictions): Use

A keyboard trap is a bad UI pattern in which a user can get into a component or element of our application using the keyboard, but it is impossible getting out of it just by using the keyboard. Not to be confused with a focus trap, which is basically the same, but with a keyboard exit (it may be a c

At work, we talked about the different image formats that we support in the platform, and that reminded me of an Image Format decision tree that I created a couple of years back: I even made a joke about it, but I never shared it on comiCSS (it didn't exist). Also, I was not too fond of the visualiz

Today's Angry NPC Wojak meme was only in preparation for the next comic: a version of the comic explaining how CSS is actually a "programming language"... and not just a programming language but an object-oriented one* It takes the code from today's cartoon and expands it a little. I like it because

A CSS version of the online meme "Angry NPC Wojak" as a preparation for a different version of this meme about CSS being a programming language or not. Of course, it is not perfect and the same as the original, but that is part of the beauty of the original: it is ugly and imperfect. This one has no