Recently, Chris Spooner of Line25 wrote a tutorial describing how to create a letterpress effect with CSS3’s text-shadow property.
In another article, Chris Coyier of CSS-Tricks showed how he makes all the text links on his website feel more button-like using a simple bit of CSS positioning.
During a recent project I was working on, while messing around with the CSS3 text-shadow property, I serendipitously combined the two different effects from those two articles to create a letterpress effect on active link states.
View the demo page to see four examples of links whose active states use the CSS3 text-shadow property (along with positioning) to create links that feel, as Coyier says, “more button-like”.
The CSS
The code is pretty straightforward, and you can mess around with the blur and distance of the shadow to create different types of effects. But in general, I think this particular effect works better on larger buttons as opposed to body text links.
a:link, a:visited {
color: #aaa;
text-decoration: none;
font-size: 36px;
text-shadow: 1px 1px 1px #555;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:hover {
color: #bbb;
}
a:active {
text-shadow: -1px -1px 1px #555;
position: relative;
top: 1px;
left: 1px;
}
The example code above is from the second big link on the demo page. After setting the link color and font size, the text-shadow property is offset by 1px on both the x and y axes, then the shadow is changed to a -1 pixel offset on the “active” state, or when the link is in the process of being clicked.
The third example in the demo has similar code, but doesn’t use the positioning method, making the pressed-down effect appear using just the shadow. There’s a small difference between the two, and I’m sure some experimenting will lead you to the effect you like best, if you want to create this type of “press-down” effect on links.
Nothing extraordinarily new here, just a different twist on already-existing CSS techniques that can give us a few more options when trying to create nice looking and intuitive buttons.
I prefer this:
a:active {
text-shadow: -1px -1px 1px #555;
position: relative;
top: 2px;
left: 2px;
}
the 2px gives it a more pushed in effect.
Even though I hate internet explorer. your demo doesn’t work with IE6.
Is there a way to go around that and show something nice to IE6 users?
thanks
you could show ie6 users a link to a modern browser that shows you what web is supposed to look like….
Yeah, the second example looks nice, never thought of a hover state with the shizadow.
And for the “IE6 User”, are you serious?
This is incredibly useful , but a little tweaking here and there could give a much nicer effect.
Britilant idea :)
@Erik Kubitschek: CSS3 is not IE6 :)
Nice technique..pretty useful..thanks…
This is a baaaaaaaaddddd idea. (At least the demo implementation is)
Putting aside the IE6/7/8 user issue. Links should be recognisable as links, familiarity is a (if not THE) key principle of UI design. Make them blue or another strong colour and as a bonus keep the mouse off state underlined.
My favorite resource to speed up CSS3 dev is: http://css3generator.com/ has a box-shadow and text-shadow generator.
I liked your posting so I looked to see if you had any ads that I was interested in and visited those sites to show you support.
Thanks,
Doug