Inbound Thinking

Over the last few days I have had some free time to refine the CSS of a couple sites / applications I have been developing. While refining the sheets I managed to answer a number of my own questions as well as discover some really cool (IMO) effects. Here are a few I’d like to pass on.

< hr / > Tags:

Styling hr tags can be a bit of a mystery, the rules don’t always do what you intended. Therefore most people leave the hr tags alone and are content with boring lines. I’m not one of those people.

• hr tags are made up of a 0px line and a border. This is my contention based on many different CSS applications. You should style your hrs based on the border. For instance:

hr {
color: LawnGreen;
border-style: solid;
}

or
hr {
color: SteelBlue;
border: 5px ridge;
}

< a > Tags:

You can style anchor tags a million ways. Once you understand the basics of hover, active, link, and visited states, you can generally achieve any look you want. There is an argument out there for keeping anchors simple so as to not confuse users, but depending on the site and the audience, you can get away with some really clever styling without confusing the audience. Here is some CSS to create links that look and like buttons on hover, and have a realistic clicking action.

a:link, a:visited {
padding: 2px 4px;
}
a:hover {
border: 2px outset AliceWhite;
padding: 0 2px;
}
a:active {
border: 2px inset AliceWhite;
padding: 0 1px 0 3px;
}

The reason for the padding changes are to keep the text in the same place on hover when the border appears, and to move the text slightly to the right on active. That way when you hover on the link a button form appears, and when you click on it, the button depresses and the text shifts 1px to the right completing the effect. You can adjust padding and colors but this basic structure can acheive some nice results.