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.

As game complexity increased, techniques developed to manage the multitude of sprites while keeping game play flowing. One variation saw sprites being plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively painted them on the screen.

Button Rollovers

CSS buttons have become a common technique in most Web developers’ arsenal of tricks. Where once we used clunky JavaScript to change the appearance of a graphic when the user rolls over or clicks it, modern Web designers use the CSS :link, :visited, :hover, and :active pseudo-classes to swap out images in the links background without ever having to program a single line of scripting code. However, there is a drawback in the form of a slight (but annoying) delay as the image files swap out. If we bang all of those images into a single sprite file, that problem goes away.

Creating easy and useful CSS Sprites

CSS sprites are a way to combine images to improve our page loading time, reducing the number of requests our server does.

Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

CSS Image Sprites: How to Create CSS Sprites for Blog Icons, Web Site Icons

Combine all those blog icons or Web site icons into 1 single image and use CSS positioning to display them all where needed. Your pages will load faster since you’ll save bandwidth, HTTP requests, and more. Learn how in this CSS sprites tutorial.

Advanced CSS Menu

How to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

How to use CSS Image Sprites in 10 Minutes!

CSS: Using Percentages in Background-Image

Last week you might have noticed we’re trialling a new experimental screen gadget in our books section — a JavaScript-powered book that allows you to thumb through the book to get a quick sense of the layout and feel.

While I might talk about that directly later, I thought I’d share some of my research on CSS background images along the way.

Like a lot of CSS/JS based animation these days, I used ‘background image sprites‘ — a large background-image containing all the frames, with background-position used to control which frame (or animation cell) is being displayed. Each click moves the background position exactly one frame down. The key advantage to using one image is you can guarantee all frames will be cached the moment your animation is ready.

Share this article!

Share it your friends & colleagues and help us spread it to the World.