Web Hosting News

If you’re not using CSS Sprites (also known as the CSS Image Replacement Method) you should be. Many coders seem to fear this easy and basic way to use images with CSS and I’m not sure why.

The benefits of CSS Sprites are plentiful, but you (and your visitors) will benefit from this method ten-fold. For the coder it’s less slicing and cropping of images, and for the user it rids us of that annoying image loading flash when you use CSS to replace background images.

I’ll take you through some quick steps to get started with CSS Sprites.

First, fire up Photoshop (or your graphic editor of choice).

For this example we will start easy and make a background (and hover state) for one tab.

First Create a new document (CTRL + N) width a width of 100px and a height of 50px. Than fill in the background with the color of your choice. I’m using black (#000000).

Next, click on the shape tool and select the rounded rectangle (SHIFT + U). Drag the shape until you get a nice looking tab. Double click the shape’s color box and choose a color for your tab. I’ve chosen red (#ff0000). Now, choose the move arrow and drag the shape so the bottom half of the rounded rectangle is outside of the viewing box so it looks like this:

Now, let’s make sure our tab is centered in the box. Select all (CTRL + A) and make sure the tab’s layer is selected. Click on the arrow (move) tool again. Now on the top tool bar click the “Align horizontal centers” icon (see image below):

Now, we can style our tab a bit. I’ve added an inner shadow to give the tab some depth (double click shape layer to have layer styles dialog appear):

Great. Now, the next step is up to you. You can leave the tab blank and have text overlay it through the HTML, or you can use a stylized text. I’ve chosen to use a font that isn’t available through CSS/HTML so I’ve added that to image. (To make sure your font is centered repeat the step above and “align horizontal centers”):

Great, so we have our first tab. Now we need to create our hover state for this tab. Duplicate your tab by right-clicking the title bar and selecting “Duplicate”.

Now on the duplicated tab I’ve changed the background color to a light blue (#00a8ff) (double click shape color box again to have color dialog appear).

Now, back to the original red tab I am now going to merge the two tabs together. For this example I am going to place the two tabs side by side, but that’s a preference left up to you. You can also stack the images on top of each other – or put them in any order you prefer.

So, right click on your original tab’s title bar and select “Canvas Size…” from the drop down. Click the LEFT arrow, and change the width to 200px (increase your canvas size by the width -or height if you are stacking) of your tabs).

Now, to the right of your image you will have an extra 100px. Now, go back to your hover state image. Select all three layers and press CTRL + G. This will group all three layers into a folder. Now select the move tool (black arrow) and drag the image into the first image. Now adjust the grouped layer so it sits EXACTLY next to the original with the same height and width (you won’t see any of the transparent background if you do this correctly).

You should then have an image that looks similar to this:

And that’s it for the photoshop work!

Now, fire up your text editor.

Here is the HTML:

Home

And here is the CSS:

  a.home {
        background:url(tabs.gif) no-repeat;
        float:left;
        text-indent:-9999px;
        height:50px;
        width:100px;
        }

a.home:hover {
        background-position: -100px 0;
        }

Also if you want to use this as your “current” style (highlight the current page) you can add that class to the CSS so it would look like this:

a.home:hover, a.active {
        background-position:-100px 0;
        }
        

See the demo.

Not so hard right?? Check out the HTML and CSS for CSSgirl and you will see that for my main nav “images” I am using CSS Sprites. For this site though I used one large image that contained all the images for both the original nav and the hover states. So my HTML looks like this:

id="navi">class="home" href="http://cssgirl.com">Home
class="about" href="http://cssgirl.com/about">About CSSgirl
class="portfolio" href="http://cssgirl.com/portfolio">Portfolio
class="contact" href="http://cssgirl.com/contact">Contact
class="free" href="http://cssgirl.com/free">Free Resources

And my CSS looks like this:

#navi {
        float:left;
        width:520px;
        height:48px;
        }

#navi a:hover {border:none;}

#navi a {
        background:url(images/navigation.gif);
        height:48px;
        display:block;
        float:left;
        text-indent:-9999px;
        }

#navi a.home {
        background-position:0 0;
        width:94px;
        }

#navi a:hover.home {
        background-position:-425px 0;
        }       

#navi a.about {
        background-position:-95px 0;
        width:91px;
        }

#navi a:hover.about {
        background-position:-520px 0;
        }       

#navi a.portfolio {
        background-position:-186px;
        width:128px;
        }

#navi a:hover.portfolio {
        background-position:-611px;     
        }

#navi a.contact {
        background-position:-314px;
        width:107px;
        }

#navi a:hover.contact {
        background-position:-739px;
        }

#navi a.free {
        background-position:-852px;
        width:98px;
        }

#navi a:hover.free     {
        background-position:-953px;
        }

Get out there and try it! Show me how it turns out. I’d love to see what you guys can do with this.