Animated text depth with gradient text-shadow on hover

For fun, I thought I'd add some light pizazz to the page title (i.e. "Behind my Monitors") when a user hovers over the text. Go ahead and hover over that text and (hopefully!) you'll see what I'm talking about.

This is really pretty straight forward:

h1 {
   position: relative;
   top: 0;
   left: 0;
   -webkit-transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -o-transition: all .25s ease-in-out;
   -ms-transition: all .25s ease-in-out;
}

h1:hover {
   text-shadow: -1px 1px 0 #000, -2px 2px 0 #333, -3px 3px 0 #666, -4px 4px 0 #999, -5px 5px 2px red;
   top: -5px;
   left: 5px;
   -webkit-transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -o-transition: all .25s ease-in-out;
   -ms-transition: all .25s ease-in-out;
   color: #fff;
}

1. I first set relative positioning to my h1, because I'll be animating a position offset, and set the top and left values to 0.
2. I then add a :hover state and add some comma separated text shadows. I've added 5 different colored shadows, with no spread (so they're sharp), and offset them by 1px at each step. This creates the effect of a 5px multi-colored gradient text shadow.
3. Then I added the animation to both the h1 and h1:hover.

And that's it. It's a bit cheesy; not unlike old school blink tags and marquees, but it also is an example of something that could be useful in the right context. Have fun!