This tutorial is on css sprites. You have probably heard about them before, and you may also have tried to make them, but for many people still, css sprites are a tricky part of developing, and therefore this is often skipped.

So What Are They Exactly? And Why Should I Use Them?

A sprite is another word for one image file, that houses numerous other images.
So, instead of using for example 4 files for a few images, you can place them alltogether in one file, and fat fact comes with a few nice advantages:

• one bigger file takes up less harddrive/server space than for example 4 little ones.
• a visitor’s browser visiting your site only needs to download 1 file, instead of 4. This will speed up the loading time of your website drasticly.
• because one image is transfered instead of 4, you save precious bandwidth.

How To Make a Sprite

As I said before, a sprite is an image file that houses more images. Therefore, the only thing you need to do to make a sprite, is to collect a few alike images, and then put them together in one image.
A great example of how a sprite is made can be found on Apple’s website.
It may not look that way, but for the navigation on the Apple site, only one image is used.. A sprite.

This is a great example of how sprites can be and are used in modern day webdevelopment, and it is exactly how you make a good sprite.

For this tutorial, I’ve prepared a few images. Their respective files can be found here , and now I want you to combine these images into one, and end up with an image that is alike to the following one.

That file can also be found in the zip file you can download below.

Our Basic Markup

To make our tutorial example look a little bit nicer than usual, I prepared the basic HTML for the tutorial.

[sourcecode language='css']

[/sourcecode]

As you can see, we have created a navigation element, which is nested in the “wrap” div, and below that is a “main” element, which can be used to hold some content.
To make this basic setup look nice, I prepared a little css as well. Don’t worry, we won’t get into the real deal yet.

- Tekst uit oorspronkelijke bericht weergeven -

You can place this css in a <style> tag in the head of your html code.

If you refresh your page with this markup, you'll see that there are 3 links above a big, white main piece with some content.

The Tricky Parts

As you may have already guessed, we need to make these regular links disappear, and replace them with the sprite.

[sourcecode language='css']
#navigation_list li { display: inline; }
#navigation_list li a {
width: 100px;
height: 40px;
float: left;
background-image: url('sprite.png');
text-indent: -10000px;
}
[/sourcecode]

If you add that to your css, you can see that our text disappears behind our background images, which are generically set to the same image; the sprite.

There is one problem occurring though; all links have the same image. We need to solve this -and this is where the tricky part comes in- with the css property "background-position".
This means that, for each of our links (and their corresponding ID's) we need to create a few lines of special code, that changes the position of the background.
The tricky part of the backgroud position is, that even you want to move the "view" to the right and/or below, you need to put in negative values. This is not a too hard trick, but many people still forget it, and therefore stop trying when developing with sprites.

[sourcecode language='css']
a#link1 {
background-position: 0px 0px;
}
a#link2 {
background-position: -100px 0px;
}
a#link3 {
background-position: -200px 0px;
}
[/sourcecode]

As you can see, we applied our negative values in the background-position property on each of our links. If you refresh now, you'll see that every link has its own image now.

Pseudo Classes

Pseudo classes! These are the kindof classes that bring along a condition. When this element is hovered, do this. When this link is visited, do that. And so on.
In order to apply our hovered status to our tabbed links, we will need to apply a pseudo class, and we do it like this:

[sourcecode language='css']
a#link1:hover {}
[/sourcecode]

As you can see, we have simply added some extra characters, but now whén you hover over, it will style the link in a different way than it would normally.

[sourcecode language='css']
a#link1:hover {
background-position: 0px -40px;
}
a#link2:hover {
background-position: -100px -40px;
}
a#link3:hover {
background-position: -200px -40px;
}
[/sourcecode]

If you add this to your css, refresh your page, and hover over a tab, you'll see that the tab "moves" upward a little, and moves back when the cursor is gone.

Active Tabs

The last thing we need to do is to create an active tab. This is not able with a pseudo class, so we will just create our own class, that you need to add to the active link. Again we will need to create a seperate piece of code for each link.

[sourcecode language='css']
a#link1.active {
background-position: 0px -80px;
}
a#link2.active {
background-position: -100px -80px;
}
a#link3.active {
background-position: -200px -80px;
}
[/sourcecode]

If you put that piece if code into your last bits of css, and edit your HTML in such way, that one tab has a class of active, we are done with the markup!

Conclusion

This also means the tutorial has come to an end. I hope I have taught you a way to use images in navigation, in a SEO friendly and quick way. And afterall, the trick wasn't that hard.. Was it?

Cheers,
Daan

Author: Daan Weijers

This is a Webdevtuts contributor who has published 1 tutorial so far here. Bio is coming soon!

Related Post

Share

• Share