Text Shadow Hover States
Time for a quick Friday post before we all knock off for the weekend, this afternoon I was working with text shadow and it occured to me that I’d never seen it implemented on any links, so with this in mind I set about implementing a quick piece of code to see it in action.
a, a:active {
color:#4FCDFF;
left:0;
position:relative;
top:0;
text-decoration: none;
text-shadow:1px 1px #004F6F, 2px 2px #004F6F, 3px 3px #004F6F;
}
a:hover, a:focus {
color:#4FCDFF;
left:-3px;
text-shadow:1px 1px #004F6F, 2px 2px #004F6F, 3px 3px #004F6F, 4px 4px #004F6F, 5px 5px #004F6F, 6px 6px #004F6F;
top:-3px;
}
After playing about with this it seems to work better when you’re putting this code on a large bold element ie, a heading. It also looks pretty good when you’ve also set the text to text-transform:uppercase;
Give it a go and watch your hrefs *pop* | Example
Update: As pointed out by Mitchell in the comments, I forgot to add an :active state, so this has now been rectified.
-
Who I am
My name is Jack Osborne and I am a Glasgow–based designer and writer. You should follow me on Twitter.
-
What I do
I am a front-end developer with proficiency in; accessibility, design, semantics, usability & web standards.
-
Where I do it
I am currently working freelance and I am available for hire. Feel free to get in touch with me if you fancy a chat.
If you are writing articles like this can I suggest you show an example of the technique in action? Would be very helpful…
I like the idea of using text-shadow for headings or other prominent content. I think underlining is still an important standard for links in main copy, but I’m all for experimenting when it comes to titles and navigation.
Demo added.
Sweet, that’s pretty cool. Was having trouble envisioning what it would look like. Pleasantly surprised.
Adding an active state, you could make it go back in too, that would finish it off!
Ah yes, good idea Mitchell.
Nice. Looks a lot like David Desandro’s about page footer links.
@Andy That’s a pretty cool website, it’s full to the brim of lovely CSS3 transitions, I’ll be investigating his site more throughout the weekend.