Discuss: CSS Design: Custom Underlines
by Stuart Robertson
- Editorial Comments
2 what's so bad about that?
Nice non-hackey application of CSS.
What was so freakin wrong with blink? I never understood that. It seems like something that was a non-issue was so overdramatized that the stigma associated with it was inflated beyond necessity. I mean, they really really never bothered me.
posted at 09:34 am on February 2, 2004 by paperwings
3 Blinking & Animation
Blink was reported to cause some people with epilepsy to have seisures. I think it’s possible that some animated gif files could produce the same effect. This technique doesn’t require you to use animated .gif files. You could design very subtle custom underlines if you wish (eg. double-underline). If you wanted to give your visitors options, you could use a style-sheet switcher as well.
posted at 09:41 am on February 2, 2004 by Stuart
4 Well explained
I get more questions about the damned animated underlines in my Zen Garden design than I do about the whole Elastic nature of it (see http://www.alistapart.com/articles/elastic/ ).
Now I can point people here. Nice one.
posted at 09:56 am on February 2, 2004 by Patrick Griffiths
5 non hack or hack?
Considering this isn’t a true underling, I think it qualifies as a hack. A nice one, to be sure, but the real achilles heel is that it won’t wrap properly. This will make very long URLs break layout. A hack can be defined as “something used in a novel manner for which it was never intended” Making background images act as underlines qualifies.
That said, it does surprise me that CSS doesn’t support arbitrary underline styles [or perhaps it does, and I need to red up a bit more]
posted at 09:59 am on February 2, 2004 by CM Harrington
6 It's not a hack
The intention of CSS was always to present something however the designer wanted to. Just because there is a text-decoration property doesn’t mean that styling an underline another way is a hack.
posted at 10:06 am on February 2, 2004 by Patrick Griffiths
7 IE6 acts a little freakaaaay
The link in your second paragraph acts strange in IE6 in Windows2K (I haven’t tried other versions of IE). It disappears when moused over, then seems to toggle on and off based on mouse-over. Looks fine in Firebird 0.7.
I’m at work so I can’t spend too much time diagnosing the problem. Just thought I’d bring it you your attention.
posted at 10:45 am on February 2, 2004 by Trent Lucier
8 CSS Error
There’s an error in the CSS:
p { line-height: 1.5; }
1.5 what? I’m guessing it should be em’s but, yea, without it it doesn’t make much sense.
Just a heads up.
posted at 11:05 am on February 2, 2004 by Rick Yribe
9 what about images?
any tips to disable this for images wrapped in links?
posted at 11:18 am on February 2, 2004 by scott
10 I feel your pain, Patrick
Somebody even <a href = “http://dris.dyndns.org:8080/archives/431/index.html#c193”>asked [em]me[/em]</a> how you did your animations.
posted at 11:39 am on February 2, 2004 by Chris Vincent
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






1 Nooooo!!!!!
Its the equivalent of the blinking text all over again!!
posted at 09:30 am on February 2, 2004 by zed