Jon Hartmann

CSS Sprites for Hover Effects Tutorial

• November 4, 2008 9:22 AM
• CSS, Examples & Tutorials
• Comments (0)

While I'm a web developer, I often delve into the world of a web designer as well, specially when it comes to optimizing performance and user experience. That, and my love of techniques used in 8-bit games, is why I love CSS sprites, and why I put together a tutorial on how to create and use a CSS sprites for menu backgrounds, like in this demo. Click on the "More" link below to view the tutorial.

For those of you that don't know, a CSS sprite is a single image that contains multiple small images. Using CSS rules, you can selectively display certain sections of the image to use the parts independently. This increases performance, as it cuts down on round-trip calls to the server to fetch these small images; with today's download speeds, it costs more to create the connection to the server then it does to download the file, so reducing round trips is paramount.

This demonstration will walk you through making a simple menu with three backgrounds using a single image file.

View the CSS Sprite demo.

Step 1: Create your HTML

So, lets get our HTML setup.

This is pretty basic code, although its important to note that I didn't use a <table> element to create the menu layout. I'll be using CSS to position everything in Step 2, and using a list element makes the menu degrade better for those without CSS enabled or those using screen readers.

I also added in a CSS hook for one of our three backgrounds: the 'active' class on the first anchor tag. This will prepresent the page or section that the user is currently viewing, and will be a different background from the other links.

Step 2: Add Basic CSS

Ok, so lets add some basic CSS to the setup to get things positioned.

Once that CSS is added in, your menu should look something like the following:

Step 3: Create your Sprite

To create our sprite, we need to keep in mind that we need room for three images: normal background, active background, and hover background. We are also going to be repeating our sprites horizontally to fill our menu elements completely, so we need to order our sprites vertically. If we were building a vertical menu, we would be repeating the images vertically and we could stack our sprite horizontally.

Open up your favorite image editor and create a image that is 5px wide and 90px high. This gives us room for three 5x30px background images, stacked end to end. You can make your backgrounds look however you want; the sprite I made for the demo looks like this:

Step 4: Set Background

Ok, now that we have our sprite, lets add the first background to the menu. Add the following line to your '#menu li a' style.

Your menu should now look like this:

Step 5: Set Active Background

Ok, now lets add the following line to our CSS.

Your menu should now look like this:

What we have done is changed the offset of our CSS sprite by 60 pixels so that instead of showing the part of the image with the light green gradient, we are showing the portion with the dark green gradient.

Step 6: Set Hover Background

Finally, lets add the hover state.

Which gives you the following image, if you can imagine my mouse hovering over the yellow item.

What we did there was say that whenever you hover over the anchor, use an offset of only -30px, which will shift the image back up and show the yellow gradient.

Conclusion

So, thats all there is to it. If you want to know more about CSS sprites, you can check out Creating Easy and Useful CSS Sprites from CSS Globe.

• Print
• Send