Creating Clever Logo Banners

By Patrick Lin

Good designs are always clever. They need something to help them stand out from the rest. Here’s how to create a clever logo banner that looks good and is SEO Friendly, like the one Lateral Code uses, using an image and some clever CSS.

The first step is to create the banner. For demonstration purposes, the following banner will be used:

This is the markup involved:

<div id="logo">
	<h1><a href="/" title="Home Page"><span>Sample Logo</span></a></h1>
</div>

with the following CSS:

#logo {
    background:url(path_to_banner.jpg);
    width:780px;
    height:100px;
}

That part is easy enough. The next step is a little bit of clever CSS and some measurements.

In this example, the Logo runs from 62px to 234px horizontally, and 34px to 78px vertically, or 172x44px, so we add the following CSS:

#logo h1 a {
    display:block;
    width:172px;
    height:44px;
}

And to position it, we add to #logo:

#logo {
    background:url(path_to_banner.jpg);
    width:718px;
    height:66px;
    padding-left:62px;
    padding-top:34px;
}

Notice that I have shrunk the width and the height. This is because of how the CSS Box Model works – the actual width is the specified width added to the padding.

Now we are stuck with a problem: the text from the HTML overlays the text in the image, making it look unappealing. The reason we wrap the text in a span is so we can hide it, like so:

#logo h1 a span {
    display:none;
}

And it looks great.

As a bonus tip, you can increase interactivity by having the image show a friendly tip on hover – which, unfortunately, does not work in Internet Explorer 6.

We do this using a technique known as CSS Spriting – putting two images in one and only displaying part of it at a time. Here, I duplicate the image vertically and put an extra tidbit on the second one.

Because we set #logo to a specified height, the part below what we want to show gets hidden. Then we add the hover effect:

#logo:hover {
    background-position:0 -100px;
}

Then, when the user hovers over logo, it shifts the background position and shows the second image, that has the tip.

So the final CSS is:

#logo {
    background:url(path_to_banner.jpg);
    width:718px;
    height:66px;
    padding-left:62px;
    padding-top:34px;
}
#logo:hover {
    background-position:0 -100px;
}
#logo h1 a {
    display:block;
    width:172px;
    height:44px;
}
#logo h1 a span {
    display:none;
}

To create the effect.

Of course, to make it work in Internet Explorer 6, it is possible to use jQuery to add the hover effect that CSS isn’t able to:

$(function() {
    $("#logo").hover(function() {
        $(this).css("backgroundPosition", "0 -100px");
    },
    function() {
        $(this).css("backgroundPosition","0 0");
    });
});

And there you have it.

Tags: css, html, tutorial

This entry was posted on Monday, January 26th, 2009 at 23:04:24. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

• RSS
• Tweet this!
• Delicious
• Facebook
• DFloat
• DMoo
• E-mail