29
Mar

Springy rainbow CSS text

Posted by Benjamin Reid in CSS

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.

View the demo of springy rainbow css text

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.

<a href="#" class="normal">Springy</a>

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.

Author: Benjamin Reid

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

RSS Icon

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

Digg Icon Share Springy rainbow CSS text to Twitter Share Springy rainbow CSS text to Delicious Share Springy rainbow CSS text to Facebook

This entry was posted on Monday, March 29th, 2010 at 1:03 pm and is filed under CSS & tagged with . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Related post(s)

Comments left by other wizards

3 Responses | Make a comment

  • Peter wrote on August 29, 2011

    Using the new CSS3 Transition rules you can create the effect on the desandro site. Just add this

    -webkit-transition: all 0.12s ease-out;
    -moz-transition: all 0.12s ease-out;
    -o-transition: all 0.12s ease-out;
    transition: all 0.12s ease-out;

    to the css rule for the original and then you will get a nice transition effect to the hover rules.

    Reply

  • celebrity sextapes|celebrity Sex|celebrity Porn wrote on October 21, 2011

    celebrity sextapes|celebrity Sex|celebrity Porn…

    [...]Springy rainbow CSS text | Nouveller[...]…

    Reply

  • otha wrote on November 20, 2011

    otha …

    [...]Springy rainbow CSS text | Nouveller[...]…

    Reply

Leave your words of wisdom

Leave a Reply

This is a Gravatar

Your name