Preparing for the Big Brief: CSS Sprites

In one of my previous posts I embarrassingly listed the use of Image Maps as one of Nate Koechley’s ten tips for making web pages load faster, what I meant was CSS Sprites.

We will be using CSS Sprites to organise common graphic elements in the Choice Campaign website. They are a really easy way of grouping buttons with their corresponding rollover states onto a single master graphic, rather than slicing everything up.

Taking an HTML element like a DIV, you specify its width and height with CSS. Then using the CSS Background selector, you set the Master graphic as the background image. Following this you offset the background image using minus pixel values along the X and Y axes so that the top left hand corner of your button fits the top left hand corner of your div. You apply these values to the hover state of an anchor to create a rollover.

There is a good tutorial on A List Apart:

This will save a lot of time when preparing graphics in Photoshop, and will reduce the amount of CSS I will have to write, leading to faster page loads.