Guest Post: Alternative Style Links
The following post is a guest post, authored by Volkan Görgülü (email link) who has a passion for developing usable and accesible websites and writing well structured CSS and semantic (X)HTML.
You may know the classic link style very well. Blue with 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:0 and y: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.
Loading ...
1
It also works with a border bottom… or am i wrong ?
Comment by Chocopunk — October 25, 2007 @ 10:23 am
2
I too am wondering why an image over a border. Just a matter of personal preference?
Comment by Jeremy Tolbert — October 25, 2007 @ 10:26 am
3
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.
Comment by Chris Coyier — October 25, 2007 @ 1:39 pm
4
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).
Comment by Jermayn Parker — October 25, 2007 @ 11:39 pm
5
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.
Comment by Volkan Görgülü — October 26, 2007 @ 6:07 am
6
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.
Comment by Dennison Uy - Graphic Designer — October 26, 2007 @ 6:51 am
7
@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.
Comment by Chris Coyier — October 26, 2007 @ 7:06 am
8
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.
Comment by Dennison Uy - Graphic Designer — October 26, 2007 @ 7:35 am
9
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.
Comment by Andrew — October 26, 2007 @ 9:56 am
10
@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.
Comment by Chris Coyier — October 26, 2007 @ 2:55 pm
11
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!
Comment by Wolfie! — October 30, 2007 @ 3:56 am
12
Its really different Chris.
Thanks chris and i also like to thanks Andrew for the ALA article.
Comment by Testimone — October 31, 2007 @ 4:08 am
13
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.
Comment by Steve — November 1, 2007 @ 4:49 pm
14
I don’t think little padding makes it any nicer. I liked the idea of different colors on mouse over.
Comment by zparacha — November 7, 2007 @ 12:56 pm
15
Hi! Nice site!
Comment by jack — November 15, 2007 @ 1:12 pm