HOW-TO: LED-like links using CSS
Not everything is bad though. I got lots of positive feedback about those sexy LED-style sidebar links, so here's how these are done, so you don't have to view the whole source to find it. Unordered lists seem the best way, so let's start with the HTML code:<ul class="sexylinks">
<li>
<a href="http://www.asseptic.org/blog/">Normal (white) LED</a>
</li>
<li class="redlink">
<a href="http://www.asseptic.org/blog/">Red LED</a>
</li>
</ul>
Of course, I did place the unordered lists inside a TABLE to get the two collumns you see in the sidebar. Now, to the CSS file! I start by defining the basic character of all unordered lists:ul {
font-family: "Lucida Sans", Arial, Helvetica, sans-serif;
font-size: 10px;
}
And of course, the basic character of all links:a {
color: #DDDDDD;
text-decoration: none;
}
a:visited {
color: #BBBBBB;
text-decoration: none;
}
a:active, a:hover {
color: #FFFFFF;
text-decoration: none;
}
Now we will specify how the class 'sexylinks' — when applied to an unordered list — will look, which will complement the basic UL definition — and override some attributes in case we define them again (which I didn't):ul.sexylinks {
list-style: none;
margin: 0;
padding: 2px;
}
You may want to set the padding to zero, I set it to two pixels because every item in my sidebar is slightly indented in relation to the block title. I also added:ul.sexylinks li {
margin-bottom: 1px;
}
So that we don't end up with a long vertical bar when we style the links. Now, to the links:ul.sexylinks li a {
display: block;
width: 100%;
border-left: 3px solid #666666;
padding-left: 5px;
}
ul.sexylinks li a:hover {
background: #555555;
border-left: 5px solid #FFFFFF;
padding-left: 3px;
}
We already defined the text colour and decoration earlier and I decided not to override these attributes — but you may want to override the text colour. We set to display a 100% width block so that the entire width of the list is treated as a link (not just when you mouse-over the text) and lights up (somehow IE doesn't require this attributes, but Mozilla does). And then the trick: the use of a smaller padding that compensates a thicker border when we mouse-over. Never forget that margins work outside the border (and by default it is zero in links) and paddings work inside. Now, since we set up specific classes for different colours:ul.sexylinks li.redlink a {
border-left-color: #660000;
}
ul.sexylinks li.redlink a:hover {
background: #660000;
border-left-color: #FF0000;
}
We just override the relevant attributes, and voilá! Enjoy your LEDs.···
