CSS Sprites are a common tool that web designers can use to improve their sites. They can be implemented very easily and, once they are on the site, they will improve the sites appearance, drastically reduce the loading time of the page, and improve the site's usability. This CSS trick is a must-have for any modern web designer.
How do CSS Sprites work?
CSS sprites work by splicing together multiple images (like different states of a navigation button) in one larger image and then displaying different sections of the image at the necessary times. This technique is most commonly used to display changing images like navigation buttons and images that utilize rollovers.
This technique, which uses simple CSS scripting, is much more efficient than the old way of doing things, which used multiple images and JavaScript to control which one was displayed. In the style sheet, the element is given various :hover and :active properties, similar to a link. The properties define which part of the image is displayed when a site user hovers or clicks on the image.
Preparing Images for CSS Sprites
Preparing the images that are needed for a CSS Sprite is a relatively simple task. This can be accomplished by taking the various states of of the image and placing them together in one file. Using GIMP or Photoshop, a new file should be created that is the width of all the states combined. The various states should then be placed into the image side-by-side, in the order that they will be retrieved (i.e. normal, hover, active).
One very important thing to keep in mind is that each state should be the same width. If the normal state is one width and the hover and active states are another, it will produce some unwanted results, like the the :hover state showing half of the normal state and half of the hover state.
Writing the CSS
Once the master images have been created, they are ready to be added to the page. One thing to remember is that, although these are images that are being added to the page, traditional <img></img> tags should not be used. Instead, where the image is to be placed, put a <div></div> tag with the id set as the name of the element. For example, the tag for a CSS sprite for a home navigation button might be <div id=”homelink”> </div>. This <div></div> can then be positioned just like any other page element.
The style sheet should contain the values for the three different states of each image. Typically, the CSS for any sprite will look like this:
#homelink{
background: url('images/homesprite.png') 0 0 no-repeat;
width: 100px;
height: 50px;
position: absolute;
left:20px;
top: 7px;
}
#homelink:hover {
background-position: -100px;
}
#homelink:active {
background-position: -200px;
}
The width of the width and height should be set to the width and height of each individual state in the master image, and it should only be set in the normal state, ensuring that all states show up consistently. In the :hover and :active states, the background position should be changed to reflected the change in position of the state. In the above example, each state is 100 pixels width, therefore, the :hover state moves part of the image that is shown 100 pixels to the left, and the :active state 200 pixels. For images containing states of a different size, the background position should be changed by the width of the states.
Practical Applications of CSS Sprites
The list of things that can be done with CSS sprites is endless. They can be used for navigation buttons, dynamic effects, or even just reducing the number of images that is loaded on a website. When using them as navigation buttons, they can be turned into links simply by placing <a></a> tags around the containing <div></div> tag.
When this technique is being used to place all the images on a site into one master image, be sure to change not only the background-position property of each image, but also the width and height properties, unless of course, all the images in the master image are the same width and height.
 |
 |
