Pro HTML5 and CSS3 Design Patterns

CHAPTER 14 ■ IMAGES

CSS Sprite cont.

Offsets for 1616 sprites as used in bt.gif

Example

I use two CSS sprite files in the example: bt.gif (see Figure 14-1) and wt.gif. These file names stand for

a black image on a transparent background and a white image on a transparent background. When the

user mouses over the image, the hover selector switches out the bt.gif and replaces it with wt.gif,

which inverts the color from black to white. The background is also changed to black, which shows

through the transparent parts of the image.

I include two other sprite files in the example directory that are not used in the example. They are

named tb.gif and tw.gif. These file names stand for transparent images in black boxes and transparent

images in white boxes. These embedded images are little black and white boxes with transparent images

in the center, which change color to match the background.

I created these four CSS sprites from an icon set called bitcons. I made all the embedded images

exactly 1616 pixels, like the originals. These icons are freely licensed and are available at

http://somerandomdude.net/srd-projects/bitcons. Likewise, you are free to use these four CSS sprite

files in your projects.

When making your own CSS sprite images, you can embed any image of any size into the sprite.

Embedded images do not need to be the same size. All you need to know is the offset and size of each

embedded image.