In my previous CSS3 article, we created blurred text using a shadow and a transparent text color. Today, we’ll use a similar technique to create animated glowing links.
Text-shadow is a versatile CSS3 property which is supported in all browsers without vendor prefixes. Except one. Sorry IE9 users — you’ll need to wait a few more months for IE10. It’s not just useful for shadows, though. On a darker background, a white “shadow” appears to make the text glow:
This can be applied when the user hovers/focuses over a link. With a little CSS3 transition magic, we can create an animated glowing effect. Let’s write some code. Starting with our HTML, we’ll apply a “glow” class to a link:
<a href="#" class="glow">Glowing Link</a>
Our first CSS3 declaration defines the initial state and the vendor-prefixed transition properties. The transition starts immediately and lasts for half a second. I found “linear” timing produced the most natural effect, but you can experiment with others (ease, ease-in, ease-out, ease-in-out, cubic-bezier):
a.glow, a.glow:hover, a.glow:focus
{
text-decoration: none;
color: #aaf;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
-o-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}
We can now define the glowing text properties. I found that a single text-shadow such as 0 0 8px #fff was a little too subtle. Two shadows produced a better result — one white and one bright yellow at slightly different offsets:
a.glow:hover, a.glow:focus
{
color: #fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
View the glowing links demonstration page. The source contains all the code and I recommend you experiment with different animation and text-shadow properties.
This animated effect works well in Firefox, Chrome and Safari. IE9 doesn’t support text-shadow so the effect can’t be seen. Opera supports CSS3 transitions but it only affects certain properties. Color works well, but it’s not applied to text shadows — which results in more abrupt animation. This should be fixed in a future version.
The second set of links on the demonstration page shows a back-lit effect created by changing the text color to the same as the background. However, this makes the text invisible on IE9 and below. To solve the problem, we can either use Modernizr or write our own text-shadow detection code, e.g.
if (document.createElement("detect").style.textShadow === "") {
document.getElementsByTagName("html")[0].className += " textshadow";
}
Have fun with the technique. Please leave your comments and a URL if you create a nice effect on your site.
The Ultimate JavaScript Bundle: 2 books + 1 course
- SitePoint's latest ebook: Jump Start JavaScript
- Jump Start CoffeeScript ebook
- Backbone.js: A Practical Beginner's Guide online course
Buy now $39 Normally $117 - save 66%
Or get access to all SitePoint's Premium Content with a Learnable membership
