comiCSS

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

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

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

The other day, I shared the CSS Pyramid of Greatness, based on a Parks and Recreation's joke: the Swanson Pyramid of Greatness. Which is basically a triangle, but I guess that's part of the joke. I decided to transform the demo into a template, so it could easily be changed into a "Whatever Pyramid

I finally did it. I created a small library that lets me generate this type of cartoons faster, without repeating code (or not as much) and I used it to create next week's comic. It's about doing things the "old way" (lengthier, simpler, craftier) vs the "new way" (more complex, but faster after the

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

Full article with images published on the site. Glitch Hover Effect Nazanin Ashrafi shared a series of creative button effects this month, all built with pure HTML and CSS. The animations are simple yet cleverly executed and well-achieved. This glitching button changing shapes and colors caught my a

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

As always, the whole thing is done with CSS and HTML. You can watch the process in this video: https://www.youtube.com/watch?v=KX8hr2QksXA And the source code and live demo: https://codepen.io/alvaromontoro/full/vYdyOxe