CSS: Spriting Doors

When we redesigned hotelicopter, I had to spend a lot of time cutting up images for a bunch of buttons and boxes. I was using the now-standard Sliding Doors technique, so that we could have flexible boxes. Today, I realized that I could combine this technique with another A List Apart favorite, image sprites, so that you can have sliding doors using only one image.

Effectively, you create your a background image the maximum width that you expect the box to be, as you would do with sliding doors. However, instead of cutting off the left side (or right side, as you prefer), you keep the image intact. Instead, you simply align the image to the left on the outside and the right on the inside, leaving enough padding for the image edges to show through.

spritingdoors1

Here’s an example of the technique in action.
Update: Example now works in FF3, FF3.5, IE7, IE8 and Safari 3 and 4!

The only caveat here is that this won’t work for images with transparency, and only saves you one download (ostensibly). This technique could be expanded, however, to have the hover states of the button in the image as well (as in the sprites technique), or for all four pieces of the image, used in rounded corners and custom border styles. I wouldn’t recommend either of those for particularly large boxes, though, as you’d need a really large image for those, which doesn’t optimize well.