<? echo

Project Statuses

Mental Fusion - 85%
FusionBB - 2%
This webpage is built with W3C compliant HTML5.
This webpage is built with W3C compliant CSS3.
Download: Fast, Fun, Awesome
Opera, the fastest and most secure web browser

Example Information

Intro to CSS Sprites

Posted: March 1, 2012 1:05 PM CST by Michael
Some people have recently asked me about CSS sprites and whether or not I have any experience using them. My, unfortunate, response is always, "No." So let's try and remedy that today.

First, let's start with the basics: What is a CSS sprite? A CSS sprite is a large (or small) graphic that contains many smaller graphics within. Think of it as an image palette where any image you want to display needs to be referenced from within the palette.

So why use sprites? Older video games (and even many newer ones) use sprites so that, instead of requiring many images to be read into memory, only one large image has to be read into memory. "But isn't that 1 image larger in size than smaller ones?" Typically, no. Further, each tiny image that is pulled into memory takes up extra space in memory whereas the one large image takes up less memory space and can easily be referenced many times without taking up more space. That's a similar idea to CSS sprites, however, instead of saving memory space, CSS sprites save bandwidth and reduce page load times.

HTTP requests take time. Each request has to poll the server, establish a connection, request data, pull the data, and then render the data to the browser. That's a lot of steps. When you do these same steps for say 50-100 images (or even more), your page's total load time can become incredibly long. Loading just one CSS sprite image reduces page load time and significantly reduces the overhead required by a site.

So how do we use them? First, we need a sprite. I created a simple 3-image sprite in GIMP:

Test Sprite

Now, using this image as a sprite, we can take the 3 circles and use them for different things within the website. Let's do a simple button example.

First, let's create a button:

<span class="btn_sprite"></span>
That won't do much on its own. Now we need to set up the base styles for our image, including the base background image which will use a 50x50 area of our sprite image:

<style type="text/css"> span.btn_sprite { /* set the width and height of our button: */ width 50px; height: 50px; /* remove the default border of the button: */ border: 0px; /* set our background image/sprite: */ background-image: url('/images/test_sprite.png'); /* set the sprite position: the first 0px is the x or horizontal position; the second is the y or vertical position */ background-position: 0px 0px; } </style>
This should make our button use the first 50x50 area of the image (because the button itself is 50x50) as the background. Let's see:



Looks good! Well, it's a black circle; I don't proclaim myself to be an artist. At any rate, what else can we do with this 3-image sprite? Let's add a hover effect:

<style type="text/css"> /* hover information for btn_sprite */ span.btn_sprite:hover { /* each section of our sprite is 50x50 large, so to view the second area (the red), shift the image to the left (or to the negative) 50px */ background-position: -50px 0px; } </style>
Does it work?



Sweet! Now our button has a neat (ableit simple) hover effect. We can take this one step further though. Let's add a click effect to utilize that last 50x50 area (the blue) of our original sprite image. But wait! CSS doesn't have a click property. What do we do? For this, we need a new CSS class and a small snippet of JavaScript in a few places to cover our bases: onmousedown, onmouseout, onmouseup.

Let's set up our CSS class first:

<style type="text/css"> /* btn_click class information for btn_sprite */ span.btn_click { /* the blue area starts at -100px 0px; this needs to be !important so the btn_sprite hover effect doesn't take priority */ background-position: -100px 0px !important; } </style>
Now that we have our CSS class, let's add the "DHTML" (the mouse events) to our button. I won't go into too much detail about JavaScript in this article, but it should be noted that each of the DHTML events fires whenever the event they're named for happens (e.g., onmousedown happens when the mouse button is pressed, onmouseout happens when the mouse leaves the element, and onmouseup happens when the mouse button is released over the element). So, let's add our stuff to the DHTML events:

<span class="btn_sprite" onclick="javascript: this.className += ' btn_click';" onmouseout="javascript: this.className = 'btn_sprite';" onmouseup="javascript: this.className = 'btn_sprite';" ></span>
Basically, this will set the class name of the button to "btn_sprite btn_click" whenever the button is clicked. When the mouse is released or the mouse leaves the button, the name gets reset to "btn_sprite." Alternatively, you can configure all of your styles in a single "btn_click" class so that you don't need to use two class names, but this way is more compact.

Let's see it in action:



Voila! We now have a button that utilizes a CSS sprite to show three different states: static, hovered, and clicked.

It's important to note that all of the images in this article use the exact same PNG file and it was only pulled from the server once. Kinda neat.
; ?>