Have you ever seen a nice big button with a beautiful graphic, go to click on it, and the second your cursor reaches it, the whole thing disappears with a flash of white before a hover background image shows up?
It’s a common and easy mistake for web designers. But there is a way around it.
A sprite is multiple, small, related images (such as a graphic and the one that will appear there on hover) made into one image. One then applies CSS and to only show certain portions of the image.
The result is no flashing as the browser fetches the hover image; it’s already loaded.
But that’s not the only virtue, with multiple images in one file, there are less HTTP requests, causing the whole site to load faster!
This is very easy to implement
Once you have your graphics ready, just head over to CSS Sprites generator. (It can also be done with Photoshop, but this is simpler) Upload your images and click Generate!. Then just download the sprite image and use the CSS it gives you to position it just right.
And you’re done!
Click the link below to check out a demo I put together.