design for the web

CSS sprites

12/10/2012 5 Comments

With your creative ideas flourishing – it is time we looked at better rollovers for your links. One of the most efficient and effective methods is a technique called ‘CSS sprites’. Though you will need to carefully design and plan your visuals – it is a very straight forward method of adding nice rollovers to your links.

All this setup requires is that you keep all images involved in the rollover effect within one single file – using the background positioning via CSS to reveal the relevant image for whichever link state you need.

The main advantage of using sprites instead of single images for the rollover effect is that the image will be already downloaded and cached before the link is accessed. If you use single images for this – the second image, used on rollver, will not be immediately ready and available. The visitor will therefore see a delay before the rollover image appears.

In case you’d like to work through a tutorial, here’s a fairly old one on my old blog, taking you through the required steps:
➞ clever rollovers

• download source files
• view final page

view sample

tags: CSS