November 13, 2012

Shake and Glow

I’ve seen some pretty cool effects using CSS3 lately, and felt badly about not experimenting with some CSS3 properties to see how they work. I wanted remedy that over time, so I’m going to try to do little experiments (like always) to get a handle on some new properties and see if they can be of any use.

Last night I messed around with my first such experiment, which I have just called Shake and Glow. It was a quick way for me to get a little more familiar with the text-shadow, transition and @keyframe animations properties. I didn’t go too deep here, but it is definitely exciting to see some of this stuff working and not hard to imagine some cool uses for these properties.

I basically set up two classes for links: a .glow class and a .shake class. The glow is created by a bunch of text shadows, all white, with varying degrees of blur and opacity to fade them out. The initial link color is set to be transparent so that the blur is all you see. On hover, the blurs are tightened up and the color is set to white. I used transitions to ease everything in and make it a little nicer looking.

The shake uses animation keyframes, which seem particularly cool, if not widely supported. Basically, it is setting up two keyframes to very quickly animate between two different font-sizes. Because the animation is so fast, it looks very hectic. Finally, I set the duration to be infinite, so that the animation will repeat as long as you are hovering over the link.

Combining the two classes gives a pretty cool effect. I could see something like this put to good use in a game or movie website, especially for something that leans to the dystopian or horror side of things…

Fair warning, I didn’t bother testing this in IE - and I highly doubt either work well - nor did I bother writing out all of the vendor prefixes. Since it’s just a quick experiment, I only tested in the most recent Firefox and Chrome.

As always - you can check it out at GitHub.