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.

Hovers

In the past we would have applied some JavaScript to swap in a new image for the after state. Instead our after states are in one image, so all we need is a way to selectively pull each state out for the appropriate link.

If we apply the master image to the :hover state without additional values, we make only the top left corner visible — not what we want, though clipped by the link area, which is what we want. We need to move the position of the image somehow.

We're dealing with known pixel values; a little bit of math should enable us to offset that background image enough both vertically and horizontally so that only the piece containing the after state shows.

That's exactly what we'll do:

    #panel1b a:hover {
        background: transparent url(test-3.jpg)
        0 -200px no-repeat;}
      #panel2b a:hover {
        background: transparent url(test-3.jpg)
        -96px -200px no-repeat;}
      #panel3b a:hover {
        background: transparent url(test-3.jpg)
        -172px -200px no-repeat;}
      #panel4b a:hover {
        background: transparent url(test-3.jpg)
        -283px -200px no-repeat;}

Where did we get those pixel values? Let's break it down: the first value is of course the horizontal offset (from the left edge), and the second is the vertical.

Each vertical value is equal; since the master image is 400 pixels high and the after states sit in the bottom half, we've simply divided the height. Shifting the whole background image up by 200px requires us to apply the value as a negative number. Think of the top edge of the link as the starting point, or 0. To position the background image 200 pixels above this point, it makes sense to move the starting point -200px.

Likewise, if the left edge of each link is effectively 0, we'll need to offset the background image horizontally by the width of all <li>s prior to the one we're working with. So the first link doesn't require an offset, since there are no pixels before its horizontal starting point. The second link requires an offset the width of the first, the third link requires an offset of the combined width of the first two links, and the last requires an offset of the combined width of all three previous links.

It's a bit cumbersome to explain the process, but playing around with the values will quickly show you how the offsets work, and once you're familiar it's not all that hard to do.

So there you have it. Single-image CSS rollovers, degradable to a simple unordered list.