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.
CSS Sprites
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.
So, boy, when will you introduce sprites to your navigation?
Great article. This site is a valuable resource - I’m actually still referring to your previous article, to make border-radius compatible in older versions of FireFox.
I’m about to do that. This one takes a little longer since you can’t make it repeat-x and I’ll need to make a new image in Photoshop.
Thanks!
Really? That gives me inspiration to keep it going. 😉
You can still make it repeat-x. Look at how Apple and I built ours. 😀 Or you could always build the sprite the way Apple did before their redesign (viewable at archive.org).
Hmm… Wasn’t working for me. I’ll have to play around with it.
Okay, the menu is fixed. 😉
Finally! Lol
Hehe, yeah, I know. I kinda forgot about it.