CSS Sprites?

Ok, so I’m no CSS Zen master, far from it actually. The thought of creating good CSS that is cross-browser supported and all just makes me shiver. I had to look at something today concerning links with fancy image backgrounds and rollovers that tweaked this image. After some quick googling, I am a card carrying member of the Google Brain Club, I found this neat article on A List Apart on something they call CSS Sprites. Wow, what a cool deal. Basically you use a single image for all of your links and just reposition this image as a background. What does this gain? Well, for starters only one image needs to be loaded or preloaded. Sure, this one image may be bigger than a single one of the single link backgrounds, but the composite is likely to be smaller and take only one request. It might very well fall into the same number of packets as a single one too depending on image compression and such.

So, how to pull it off? I’ll go over a quick single link example. First, fire up Fireworks (can you tell I’m not a real graphics guy? :} ) and create your two link, or button, states. Here is a sample:

css_sprite_sample_image

Now, use some simple CSS magic:

#outerCont {top:0px; left:0px; background: url( images/button_states.gif ) 0 0 no-repeat;}
#outerCont a:hover { background: url( images/button_states.gif ) -200px 0 no-repeat;}

Here is a sample page showing it in action:
button_states.html

Back to our regularly scheduled Flex/Air fun!

peas
DK

This entry was posted in ColdFusion, misc, Techy, Universal Mind. Bookmark the permalink.