Howto

Facebook Twitter

Tips

Content. Databases. 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.

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

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. Think of CSS Sprites as an extension of that technique. Why combine all those images? Nope, it's not. Let's look at a quote from the article "Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests" by Tenni Theurer on the Yahoo! Table 1 shows popular web sites spending between 5% and 38% of the time downloading the HTML document.

OK. I thought you would never ask. Now check out the AFTER example. Ugh. Ask.com. The-z-index-css-property-a-comprehensive-look. Advertisement Most CSS properties are quite simple to deal with.

the-z-index-css-property-a-comprehensive-look

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 property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges.

In this article, we’ll explain exactly what z-index is, how it has been misunderstood, and we’ll discuss some practical uses for it. What is it? The z-index property determines the stack level of an HTML element. 3-dimensional representation of the Z axis: The Natural Stacking Order Why Does it Cause Confusion? Syntax. The Myth of DPI. The size of an image in a website layout is important.

The Myth of DPI

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 process of sizing images for the web is often misunderstood. The misconception about resolution in digital images bound for the web is that they must meet a certain number of dots per inch. In print, pixels per inch and dots per inch impact the size of an image on a page. When someone converts an image to 72 DPI, they’re adding an extra step with no benefit. When someone asks you for a web image that’s, say, two inches wide, they’re estimating how it would appear on their own monitor.

Pixel Size Depends on Context A pixel (which is short for “picture element”) is the smallest unit of measure on a grid displaying a digital image. An Experiment.