Skip to main content
CSS is fun and cool and I like it.
Article

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single <circle></circle> element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript!

I managed to get the following result using a single HTML … Read article

Article

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let's see how I did that!
Link

Dark theme in a day

Link

A Strategy Guide To CSS Custom Properties

Article

CSS Environment Variables

We were all introduced to the env() function in CSS when all that drama about "The Notch" and the iPhone X was going down. The way that Apple landed on helping us move content away from those "unsafe" areas was to provide us essentially hard-coded variables to use:

padding: 
  env(safe-area-inset-top) 
  env(safe-area-inset-right) 
  env(safe-area-inset-bottom) 
  env(safe-area-inset-left);

Uh ok! Weird! Now, nine months later, an "Unofficial Proposal Draft" for env() has landed. This is how specs work, as I understand it. Sometimes browser vendors … Read article

Article

What Houdini Means for Animating Transforms

I've been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn't animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts.… Read article

Article

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable.… Read article

Article

Simplifying the Apple Watch Breathe App Animation With CSS Variables

When I saw the original article on how to recreate this animation, my first thought was that it could all be simplified with the use of preprocessors and especialy CSS variables. So let's dive into it and see how!… Read article

Article

Creating Yin and Yang Loaders On the Web

I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you through the process of building these demos.… Read article