How to create CSS sprites
This technique is based on an old technique that was used in video games to build all kind of things (read more about sprites). Even though this technique is old, it is still very useful in the modern world of web-design, and if you know how to add and subtract, then we are ready to move on.
The basic concept of CSS sprites
The concept is fairly easy, you have one large image that consist of smaller images. In our case, the main image contains two cells that have an apple screen in each of them. (click here to se the main image)
The Code
Let’s look at the html for the current example. As you can see it is very straight forward.
1 2 3 4 5 6 | <div id="sprites"> <a id="top-left" href="#"></a> <a id="top-right" href="#"></a> <a id="bottom-left" href="#"></a> <a id="bottom-right" href="#"></a> </div> |
The CSS
It?s time to apply the magic, and as you can see here as well, it is very simple. The magic is how we are positioning the background image in each link and every time we hover over a new link we will move the background image to a new position.
1 2 3 | a#top-left { background: url('apple_sprite.jpg') 0px 0px no-repeat; } a#top-left:hover { background: url('apple_sprite.jpg') 0px -210px no-repeat; } a#top-left:visited { background: url('apple_sprite.jpg') 0px -210px no-repeat; } |
1 2 3 | a#top-right { background: url('apple_sprite.jpg') -130px 0px no-repeat; } a#top-right:hover { background: url('apple_sprite.jpg') -130px -210px no-repeat; } a#top-right:visited { background: url('apple_sprite.jpg') -130px -210px no-repeat; } |
1 2 3 | a#bottom-left { background: url('apple_sprite.jpg') 0px -105px no-repeat; } a#bottom-left:hover { background: url('apple_sprite.jpg') -0px -315px no-repeat; } a#bottom-left:visited { background: url('apple_sprite.jpg') -0px -315px no-repeat; } |
1 2 3 | a#bottom-right { background: url('apple_sprite.jpg') -130px -105px no-repeat; } a#bottom-right:hover { background: url('apple_sprite.jpg') -130px -315px no-repeat; } a#bottom-right:visited { background: url('apple_sprite.jpg') -130px -315px no-repeat; } |
Let’s see it in action
So as you can see, there is no need for cutting up images to create an image replacing technique, especially not when IE7 comes out, because Microsoft have finally implemented hover on all elements.
Further reading: Create sliding doors with sprites
Recent Posts
[…] Me ha gustado mucho la implementación de estos sprites (no he encontrado una traducción digna) mediante CSS. [Demo] […]
[…] Not long ago I made an example on how you could apply the sprite technique with css (how to create sprites) and since a few good people liked that effect, then why not apply it to the Sliding Door effect as well because it will save us a little bit of time when we are going to create the tab(s) (see my sprite tab here). […]
Hi please, can you help me, css sprites are very interesting, but do they work in internet explorer 6 ??? I have a problem with this..please help, thank’s
Hi Subseth
Yes, the technique works fine in IE 6 :)
what are your having trouble with?