CSS3 Rainglows

My co-worker and I were talking about CSS3 animations the other day. Rather pragmatically, he asked if there was any application for them in an application like LiquidPlanner. At the time, I couldn't think of anything, but after a few days of reflection, I think I have come up with a practical use for key framed animations in virtually any application.

Introducing the CSS3 Rainglow!!!

That's right, it's a triple bang day here with our friends Monkey and Crow. Yes developers, this is the moment we have all been waiting for. No, you still can't use the flexible box model. This is the day that you can add a rainglow to anything you please with nothing more than a boatload CSS. Imagine the the possibilities.

Try it now with this bookmarklet Rainglow Me!.

Don't like reading? Just peek at the example page and inspect the source.

How It Works

Ok, so now that you are suitably excited, let's look at how this effect is implemented. There are two components, the effect itself, and the animation. The basic effect is achieved with a text-shadow property and looks like this:

text-shadow: 0px 0px 1em hsl(0, 100%, 50%), 
             0px 0px 4em hsl(90, 100%, 50%), 
             0px 0px 8em hsl(180, 100%, 50%);

You will notice that there are actually 3 shadows, each of which is larger than the previous. This will produce 3 smooth glows around the text. The color is defined as hsl, or Hue, Saturation, and Lightness. The hue component breaks the color wheel up into 360 degrees, which makes it easy for us to cycle through the whole rainbow by incrementing the hue from 0 to 360. We use the @keyframes property to define these stages:

@keyframes 'zomg-rainglows' {
  0.0%   { text-shadow: 0px 0px 1em hsl(0  , 100%, 50%), ... }
  4.17%  { text-shadow: 0px 0px 1em hsl(15 , 100%, 50%), ... }
  8.33%  { text-shadow: 0px 0px 1em hsl(30 , 100%, 50%), ... }
  ...
  100%   { text-shadow: 0px 0px 1em hsl(360, 100%, 50%), ... }
}

A @keyframes rule lets the browser know what your elements should look like at each stage of the animation. In our example, we define 24 keyframes specifying the color of the glow effect.

Finally, we use animation-name, animation-duration, and animation-iteration-count to hook the animation up to our element. The animation-name references the @keyframes defined above. To control the speed, you can vary the animation-duration, you could make it as fast as 0.2s for seizure inducing fun, or 60s for a barely perceptible color shift. To make the animation loop forever, set animation-iteration-count to infinite. Put all those attributes together and you get:

.rainglow {
  animation-name: 'zomg-rainglows';
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Now anything with the rainglow class will have a wonderful smoothly animated rainbow of joy around it.

Caveats

Everything I told you was a lie, well sort of. As with anything awesome, this is only barely supported at the moment, so you need to toss in vendor specific extensions for all the animation attributes. For instance, @keyframes needs to @-webkit-keyframes to work in Chrome and Safari.

For more examples of the limitless possibilities check out the example page.

blog comments powered by Disqus
Monkey Small Crow Small