Facebook Twitter



CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them This post was originally co-authored in late 2007 by me and Volkan Görgülü, I'm updating it now to improve it a bit and make it more current. You've heard of them, but... Do you really understand them? The name might be a little misleading, because sprites aren't little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the "on" and "off" states of a button are contained within the same image and are activated by shifting the background-position? Here is an example of that on CSS-Tricks.
Advertisement Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances. the-z-index-css-property-a-comprehensive-look the-z-index-css-property-a-comprehensive-look
The size of an image in a website layout is important. From proper alignment to getting just the right amount of white space, sizing photos and graphics properly beforehand is essential to creating a balanced look. Images on the web are measured in pixels. Yet many people go through the trouble of setting their images to 72 dots per inch (DPI). The Myth of DPI The Myth of DPI