Big things are created with tiny bits, that’s what I hear them say. It can’t be more correct with web design - a small detail can change the whole site. In this article (and more to come) I will introduce some small CSS techniques that can make your site look pro - I must emphasize the word, since it’s all about visual effects. After all, it’s always the content that matters.

Photograph-like images

Here is what’s *very* often used to make a photo look like a - erm - photo:

And here is the DEAD SIMPLE style applied:

.entry-extended img.shot
{
    background: #fff;
    padding: 6px;
    border: 1px solid #ccc;
}

As you can see, we simply use a white background color, increase the padding value, and add a thin solid border. Change the style a bit to get what you want. Something like:

.entry-extended img.shot
{
    background: #000; /* A black background */
    padding: 12px 12px 24px 24px /* To make the bottom "border" stand out*/
    border: 1px solid #ccc;
}

will produce this:

There are definitely rooms to improve for this effect (like a drop shadow), but to me it’s enough most of the time.

Stylish horizontal rules

Yes, everyone know about the <hr /> tag and what it’s used for. Here is a horizontal rule at its natural form:

Nothing but a thin gray/black line across your screen. Isn’t it ugly? Now consider this horizontal rule being used at my Thica.net:

Much cooler eh? Here is what helped:

div.hr
{
    background: url(images/bb_hr.jpg) no-repeat center;
    height: 40px;
    margin: 10px;
}
div.hr hr
{
     display: none;
}

We wrapped the horizontal rule inside a div, hide it away, and style the div with a good-looking background image.

So why must we use a <hr /> tag here when it’s not displayed? Isn’t it redundant? Doesn’t a simple line-like image bring an exact result? The answer is: using <hr /> however is the correct way to divide a page’s content. And that’s where SEO come into play.

Drop caps aka. Initials

A drop cap is the first character in a (printed) paragraph that’s often way bigger and different from the remains. For example, the first letter B of this post is a drop cap. To create such an effect, the CSS I’m using is:

.drop-cap
{
    padding: 3px 5px 1px 5px;
    display: block;
    margin-right: 6px;
    margin-top: 5px;
    float: left;
    color: #fff;
    background: #737b7f;
    border: 1px solid #393b36;
    font-size: 80px;
    line-height: 60px;
    font-family: times;
}

Add this class into any <span> element will make it a drop cap, and your page look like a magazine. For example, this

<p><span class="drop-cap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam tincidunt. Vivamus blandit. Suspendisse potenti. Nullam vulputate,
enim sed mattis aliquet, tortor augue pretium tortor, id porta massa urna
id ante. Praesent urna magna, posuere a, facilisis egestas, lobortis a,
nibh. Phasellus nec neque. Maecenas tincidunt, dui ut vehicula vehicula,
nisi mauris hendrerit ligula, id facilisis magna elit sed erat.</p>

will display:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Vivamus blandit. Suspendisse potenti. Nullam vulputate, enim sed mattis aliquet, tortor augue pretium tortor, id porta massa urna id ante. Praesent urna magna, posuere a, facilisis egestas, lobortis a, nibh. Phasellus nec neque. Maecenas tincidunt, dui ut vehicula vehicula, nisi mauris hendrerit ligula, id facilisis magna elit sed erat.

P.S: There is a pseudo class called “first-letter”, but as far as I know it’s still buggy on both Firefox and IE, so no bother.

Rollover effects

As mentioned in one of my recent post, we can always replace the oh-so-popular javascript rollover effect with a pure CSS solution.

The idea is, instead of attaching onmouseover and onmouseout events into the anchor elements, we use a “double” background image and some lines of CSS to do the trick. Here they are:

a {
    background: url(images/rss.gif) no-repeat;
    display: block; /* so that it can have a fixed width and height */
    width: 65px;
    height: 65px;
}
a:hover {
    background-position: 0px -65px; /* half the height of the background image */
}

There, we have 2 states in one image: the top for “normal”, the bottom for “hovered”, each is 65px in height. When the mouse is over the link, the “hover” pseudo class will be activated, which simply brings the background image 65px to the top. This results in the “hovered” part being shown (and the “normal” becomes hidden), which creates a cool rollover effect. You can see the demo RSS link right on this page - and be sure to subscribe .

Now what I’m really convinced about this method is, since we have only one image, the effect is seamless - no need to wait for any “hover” image to be downloaded. And it’s Javascript-free, means I can rest assure about the user’s browser configuration.

Enhanced “visited” links

By default, a visited link will have a color of #551a8b (like in Google Search results for an example), with may look too simple or ugly. With CSS, you can decorate those links to be more impressive and stand out from normal ones, which is very good for user experience. In this example, we will mark the links with a “checked” icon on the right.

a:visited
{
    padding-right: 16px; /* Make some room for the icon */
    background: url(images/bgr_visited.gif) center right no-repeat; /* Tweak the positions */
    /* other cool styles here */
}

You can tweak the position until get satisfied with the result.

Here is the visited link that I’ve come up with. Much better right?

And more awaiting…

These are just the most frequently used (by me) CSS techniques. More to come in the new features, when more complex tips and tricks will come into play.