What are CSS sprites? CSS sprites is a term used to create a single image file that contains all the images, usually in a navigation, laid out in a grid, using only a single server call, with roughly the same file size as using sliced images. You will have to place all the “sprites” that makes up your navigation in a an image divided by a grid.
To show the sprites or the navigation items correctly, the background position must be set using a stylesheet. Usually, a negative value is used to move the background up or down.
Let me give you an example that I’ve prepared for this tutorial.
For the image above, you can see that I’ve layout a 4 item navigation menu. The normal states for the buttons are located on the upper side of the image and the hover states are located at the lower area of the image. So how do we convert this into a killer navigation? It was just a few years ago when we used, javascript for rollover effects. That was the dinosaur era when we had slow internet connection, yet we have tons of images to load. Using a CSS sprite, it takes only one image to load and once it is loaded, you could see the effects right away.
View the sprite menu demo.
Using an unordered list tag for the navigation, we assign unique IDs for each of the list items. Please check out my code example below:
<ul id="spritemenu">
<li id="sprite1"><a href="#">Home</a></li>
<li id="sprite2"><a href="#">About</a></li>
<li id="sprite3"><a href="#">Links</a></li>
<li id="sprite4"><a href="#">Contact</a></li>
</ul>
This is what your navigation should look like. I’m not forcing you to use an unordered list for your menu but you can also write the code using a div and have nested divs inside for each item.
Now for the CSS file, let’s lay it down one by one.
*{
margin: 0;
padding: 0;
}
So what is this code for? I actually always place this set of codes on top mo my CSS file to reset all the paddings and margins to zero. Each browser has a different default margin and padding so to make it the same for all browsers, we need this one. Well this is just based from my experience and I find it very important but I hope you guys find it useful too.
We’re done with that, now lets go to the next set of codes. Let’s define the style for the unordered list:
ul#spritemenu{
width: 400px;
height: 30px;
background: url(sprite.png) top left no-repeat;
}
I’ll explain to you each line of code very carefully. We define the width according to the width of the background image or to whichever width you want to achieve. After that, we define the height which is 30 pixels high. We don’t want to show the whole image so we just showed only half of the image - in this case we are showing the normal state. Now, for the last line, we defined a background image which is for the example, we used sprite.png and we positioned it on topmost of the container and stuck to the left edge. We used no repeat so the container shall render the background only once.
Let’s define the stlyle for a single list item. We use the code:
ul#spritemenu li{
float: left;
display: inline; /*This line is needed to fix the double-margin bug floats in IE*/
}
We used float: left; so the items on the list will position itself horizontally. The next line of code, display:inline; is actually a fix for the IE double-margin float bug. Don’t forget to include that. Let’s get going to the next set of codes.
ul#spritemenu li a{
display: block;
width: 100px;
height: 30px;
text-indent: -9999px;
}
The code above defines the property of each of the a element in each li. The first line, display:block; makes the a a block container and is very important for the sprite nav menu. We need to make it a block element so we could define a fixed height and width for it and render it on the browser correctly. For the last line of code, text-indent: -9999px;, this is used to hide the original text. It’s actually a technique for image-replacement but I forgot what it’s called. So let’s move on.
ul#spritemenu li a:hover{
background-image: url(sprite.png);
}
Now this one is the code that will give your hover state a different face and a neat effect. You will notice that it’s the same background image we’ve used for the ul tag. Well yes it is. We used the same image because we are talking about sprites here. We are utilizing a single image for a very neat effect.
The next lines of codes are the ones that will trigger the hover, rollover, or upstate… whatever you wanna call it. So here we go:
li#sprite1 a{
background-position: 0 -30px;
}
li#sprite2 a{
background-position: -100px -30px;
}
li#sprite3 a{
background-position: -200px -30px;
}
li#sprite4 a{
background-position: -300px -30px;
}
Have you noticed that the second value for the background-position for each set of unique li is constant? That’s because -30px is the top position of the image. Why -30px? Well if you examine the image carefully, it has a height of 60pixels. the -30 px position actually shifts the image upwards and just showing the part of the image 30px below the original 60 px image. I hope you guys get it because I’m really not good explaining. For the first value of the background-position property, it’s the x-axis position of the image. For the first li, we used zero because the location of the sprite is zero relative to the original image. For the second image, we used -100px because the button or nav grid is 100px in width. The image I made has equal 100 px button grids so it’s relatively easy to position them. Once you master the technique, you can use different widths for the list items.
Well, that’s it for the first part of my tutorial. I hope you guys learned something. This is my very first tutorial so I hope you enjoyed it and I hope you can use it for your websites.
For your convenience, you can download the files I’ve used in for the tutorial.
