Everything You Need To Know About CSS Sprites

CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance

CSS sprites group multiple images into one composite image and display them using CSS background positioning. You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page.

How Yahoo.com and AOL.com Improve Web Performance

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

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?

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

CSS Sprites: Image Slicing’s Kiss of Death

Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game.



5 things you might not know about CSS sprites

CSS sprites are a pretty popular technique now, but I still see a lot of common mistakes or misconceptions when it comes to implementing them. Here’s a few advanced tips to keep in mind.



CSS Sliding Sprite Windows

I want to share a CSS technique I’ve used alot. I’m sure that you have seen CSS sprite techniques that utilize changing background position on hover to change a link’s state.



How to Make a CSS Sprite Powered Menu

Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you’ll have some similar results.



Date Display Technique with Sprites