Using CSS Sprites
November 16th, 2008
What are Sprites in CSS?
Simply put when you use “sprites” in CSS it’s a way of using one background image, and then changing it’s position.
Why use Sprites?
It all boils down to load time and efficiency. If you use a sprite for a background for an image, then you cut down on the total file size, and the number of http requests. If you’ve ever seen an Apache server log, you’ll see what I’m talking about. When a client requests a page from a server, the server sends the requested page, and makes requests of its own, on itself. The server requests all the images, each one is a separate http request, and each one gets served separately. A single page could have many http requests.
So, let’s take a look at using a Sprite for a navigation. Here is the Sprite (you can get it, and all the other files needed by downloading the demo files. You can also view the demo.
So let’s look at the code.
The pages look like any other page, the navigation is simply an unordered list, each list item is floated left. We put an ID on the body tag, and a class on the navigation to show the active state, especially if we were looking to put our navigation in an include (which I do). For this little tutorial I’m using HTML pages instead of PHP so you can just open the page in your browser, no server required.
<ul id="mainNav">
<li><a class=”home” href=”index.html”>home</a></li>
<li><a class=”page2″ href=”page2.html”>page 2</a></li>
<li><a class=”page3″ href=”#”>page 3</a></li>
<li><a class=”page4″ href=”#”>page 4</a></li>
<li><a class=”page5″ href=”#”>page 5</a></li>
<li><a class=”page6″ href=”#”>page 6</a></li>
</ul>
So now let’s look at the CSS, which may be the tricky part (though not really). I normally write all my CSS on one line, and you’ll find it that way in the demo, but for readability here, I’ll write it block-style.
#mainNav {
list-style: none;
padding: 0;
margin: 0;
}
#mainNav li {
float: left;
font-size: 20px;
font-family: Verdana, Arial, Sans-Serif;
letter-spacing: -1px;
line-height: 30px;
text-align: center;
}
#mainNav li a, #mainNav li a:visited {
color: #fff;
text-decoration: none;
background: url(’../images/spriteBG.jpg’) 0 top;
width: 130px;
height: 30px;
display: block;
}
#mainNav li a:hover {
color: #fff;
background: url(’../images/spriteBG.jpg’) 260px top;
}
#home li a.home, #page2 li a.page2, #page3 li a.page3, #page4 li a.page4, #page5 li a.page5, #page6 li a.page6 {
color: #600;
background: url(’../images/spriteBG.jpg’) 130px top;
}
The styles look pretty normal for a navigation. But, look at the background. For a link, or a visited link, the position of the background is set for the top and 0. When you hover the button, the background shifts the x position to 260px. And when the link is active (the last style), the background is shifted over 130px.
That’s about it. If you get really creative you can animate your backgrounds with jquery.
Tags: CSS, navigation, Sprites
This entry was posted on Sunday, November 16th, 2008 at 12:46 pm and is filed under CSS. 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.
Andy Says:
Jason Says:
Leave a Reply