Sprites originated from video game design from the early days of computers. The computer would grab one image at a time from a large group of images. Contrary to popular belief they are all not all sliced separate images. It is easier to create one large image; you can combine an unlimited number of images into one. In CSS it is the same principle when applying a navigation or buttons in regular and highlighted states.
I found a very cool tutorial on Nettuts that helped me understand and create better sprites. Basically you recreate the navigation for Dragon Interactive, which has a perfect example for the use of sprites.
This is the final product as you can see it is all one large image. There is also a demo so you can see how it interacts when you are finished.
The above image is how your result from the tutorial should look.
Recommended Reading:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Thanks for sharing Liz!! Are there other web applications that sprites can be used for?
You can use them for any Web application. Sprites minimize the loading time, as all pictures can be requested at once, without the need for multiple requests.
In other words, CSS lets webmasters separate their (X)HTML content from its style.
Great information! I’ve been looking for something like this for a while now. Thanks!
This is a useful post about design. I’m a student just trying to learn more about HTML and I really enjoyed reading it. Thanks and I’m looking forward to your next article
Thanks for the tutorial. I’ve just started with this stuff. It’s very kind of you to post such thorough tutorial.