Free! CSS Sprites: Image Slicing’s Kiss of Death

In this free article Dave Shea shows how to use an innovative new CSS technique which he calls CSS Sprites that works in all modern browsers (except Opera 6), and replaces old-school image slicing and dicing (and the necessary JavaScript) with standard CSS and HTML lists.

This article was originally published by A List Apart and is reproduced by kind permission. It's copyright © 1998–2004 A List Apart Magazine, Happy Cog Studios, and Dave Shea.

Buttons

There's no reason why we have to leave the links touching each other, side-by-side as they were in the previous example. Image maps may be convenient in some spots, but what about separating each link into its own stand-alone button? That way we can add borders and margins, let the underlying background show through, and generally treat them as separately as we need to.

In fact, the building blocks are already in place. We really don't need to modify our code too radically; the main change is in creating a new background image that doesn't continue from link to link like the last example did. Since we can't rely on the <ul> for placing the original background image, we'll end up applying it to all <li>s instead and offsetting each the same way we offset the after states in the prior example.  With an appropriate image (below)

and a bit of spacing between each <li>, we've got buttons.

Note that in this example we've added 1px borders which, of course, count toward the final width of the links. This affects our offset values; we've compensated by adding 2px to the offsets where appropriate.

Irregular shapes

Up till now we've focused only on rectangular, non-overlapping shapes. What about the more complex image maps that image slicers like Fireworks and ImageReady export so easily? Relax, we've got you covered there too.

We'll start the same way as the first example, by applying the background image to the <ul> and turning off list item bullets and setting widths and so forth. The big difference is where we position the <li>s; the goal is to surround each graphical element with a box that tightly hugs the edges:

Again, because of the ability to use absolute positioning relative to the top left corner of the <ul>, we're able to precisely place our links exactly where we want them. Now all that's left is to set up the hover states (click to see them).

Worth noting is that in this case, a single set of before and after images wasn't enough. Because of the overlapping objects, relying on only one after state would show pieces of surrounding objects' after states. In fact, it would show precisely the pieces that fall within the link's borders. (Easiest to just see it in action.)

How to avoid this? By adding a second after state, and carefully selecting which objects go where. The master image in this case has split the purple and blue objects into the first after state, and the green, orange and yellow objects into the second:

This order allows boxes to be drawn around each object's after state without including pieces of the surrounding objects. And the illusion is complete (click to see it).