You may know the classic link style very well. Blue with an underline. There is an alternative way to achieve the same effect, that is a bit nicer.
Here is the code:
a {
text-decoration: none;
background: url(link-line.gif) repeat-x 0 100%;
padding-bottom: 1px;
}Giving the background position of x at 0 and y at 100% places the background image at the bottom of the text and by setting the padding-bottom to 1px, we make the distance between the text and the background image 1px.
Check out the live example, where there is another example extending what can be done by using an image as the underline.
It also works with a border bottom… or am i wrong ?
I too am wondering why an image over a border. Just a matter of personal preference?
I think Volkan is just pointing out there is more than one way to skin a cat. Always good to have options.
Also, check out the last example on the example page, it has a gradient thing going on that you could only really do with an image.
I like the option but I personally would prefer the border bottom idea as some people do turn images off.
BUT definitely has open my eyes to some ‘other’ ways of skinning the cat (or link).
Yes, you can use a border-bottom too but I think a background image gives you more power about the underline. You can use more colors and more good looking dotted lines.
And as Chris pointed out you can even create a gradient underline.
I wish there was a way to create true “gradient underlines”. It sucks that we cannot define the width or stretch images used in the background property. This can be done with multiple layers and JavaScript but it’s too time consuming for such a “simple” effect. Let’s hope CSS3 gives us more control over the background property.
@Dennison: I’m with ya. And yes, there is already better support for backgrounds in CSS3. Multiple backgrounds are supported in Safari already, which would allow us to easily create a “true gradient” underline. Let’s just hope the next version of IE supports it.
You’re right about multiple backgrounds in Safari. You also brought up a very important note on IE compatibility. As it _still_ is the dominant browser, IE is very hard to ignore and we are stuck with having to write workarounds for our poor IE audience.
This post reminds me of this ol post on ALA. It adds one important piece to the equation
white-space: nowrap;which allows you to place your underlines on links that would typically break to multiple lines. I have used this technique in a number of situations
http://www.mandraccia.com/
http://www.clearvieweyes.com/
http://www.signatureplasticsurgery.com/
with good success. Lots of fun. Also borders will not work properly if you are giving your content a healthy line spacing (I typically use 1.5 multiple) because the border goes at the bottom of the additional space.
@Andrew: Great reminder about the white-space property! I like the ALA example with the animated rollovers, that would be pretty fun if you implemented it a little more subtlety.
The sites you designed that you linked to are fantastic! You really have some good examples there of tasteful, interesting things you can do with links.
Ok, I found this page with stumbleupon and I looked at that and I thought…. what?, and I kept looking… and leaned forward, closer to the screen, i checked the fonts and the spelling and the gaps between the letters and still couldn’t see it… and then I saw it, a lighter blue line.
That’s when the fireworks went off, I was in orgasmic bliss, eureka, they’ve discovered a lighter shade of blue… and it comes in the shape of a thin line.
Sarcastic? Me?
Never.
Wolfie!
Its really different Chris.
Thanks chris and i also like to thanks Andrew for the ALA article.
Isn’t this just the type of tweaking which makes very little visual difference, but breaks things in silly ways? If I’ve got Images turned off – maybe I’m using a mobile phone, or just a slow line, or a text-based browser, my browser may well honour the “text-decoration: none”, but not include the image. So I have no indication that your ever-so-slightly-different link, even is a link.
I realise that there’s a bunch of different people from different backgrounds who have come to the web; I’m guessing the author comes from a print background, where the end result is all that matters. On the web, context and semantics also matter, and this is a classic example of brushing aside the rich and useful metadata (it’s a link!) for the sake of – as my fellow stumbler Wolfie points out – an almost unnoticeable aesthetic change.
I don’t think little padding makes it any nicer. I liked the idea of different colors on mouse over.