Springy rainbow CSS text

I found this 'springy' text effect in the footer of the Desandro website and wanted to find out for myself how it had been accomplished. Anyway after a bit off CSS-ing around I've come up with this using the text-shadow property and some positioning techniques.

Add an anchor

Simple enough. Add an anchor tag and give it a class, mines just called normal as I had my rainbow version on the same page.

Springy

The CSS

Add some basic styling to the anchor tag. The only important thing is it's position as this will need to be modified when you hover over the anchor.

a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 200px;
	display: inline-block;
	/* important */
	position: relative;
}

Now to manipulate the anchor's position when you hover over it. This makes the anchor move up 10 pixels and left 10 pixels. This is what we'll use to offset the border, making it appear to spring out the page.

a:hover {
	top: -10px;
	left: -10px;
}

Adding multiple text shadows

Now to create the actual spring effect were going to use multiple CSS text shadows. Now you'll notice I've got 10 shadows in total, each one pixel apart. This makes up for the positioning we set in the previous step.

a.normal:hover { text-shadow:
1px 1px 0 #eb29b6,
2px 2px 0 #eb29b6,
3px 3px 0 #eb29b6,
4px 4px 0 #eb29b6,
5px 5px 0 #eb29b6,
6px 6px 0 #eb29b6,
7px 7px 0 #eb29b6,
8px 8px 0 #eb29b6,
9px 9px 0 #eb29b6,
10px 10px 0 #eb29b6; }

And that's it! If you have any questions please leave them in the comments.