Creating easy and useful CSS Sprites

Let's start with the basics. What are CSS sprites?

CSS sprites are a way to combine images to improve our page loading time, reducing the number of requests our server does. In this article I will teach you how to make them.

When you make a search in Google, you have a bottom pagination. And you get something like this: Gooooooooooooooogle. The letter 'o' is repeated using the CSS sprite, so instead of loading 15 time the letter, it just loads the sprite with all the letters in it, once.

Creating our CSS sprite — Step 1: Making the image

Ok, first of all we must make our sprite image. You can make it in Fireworks, Photoshop, or whatever software you use. Here is mine:

CSS Sprite Example

As you can see, the sprite consists in a bunch of images divided between them by a 1px width line. This division is not really needed as you can see on the Google Sprite, but it makes our lifes easier when we get to the CSS. Believe me.

Step 2: Creating our sprite image revealer

Once we make our sprite image, we must make a transparent 1PX x 1PX gif image. This image will later be the one which will reveal our different images inside our sprite.

Step 3: Creating our CSS code

First of all, we will create the class 'sprite', which will load our sprite image.

.sprite {background:url(../images/mySprite.png);}

After loading our sprite, we must define the height and width of the images inside it.

Width and Height of the Sprite Images

As all my monster images have the same height, and all the application images too, I can give them a class to share their height. I will use the classes: 'monster' and 'application'.

.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;} .application {height:61px;}

Now, we must define the width of every image, because they are all different. We will use a class for each one of them.

.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;} .application {height:61px;}

/* Monsters */

.doctor {width:103px;}

.octopus {width:89px;}

.wolf {width:115px;}

.star {width:126px;}

.dog {width:128px;}

/* Applications -*/

.css {width:61px;}

.activityMonitor {width:58px;}

.dashboard {width:51px;}

.quicktime {width:53px;}

.scanner {width:74px;}

All done? Ok, here come's the good part. We must define a background-position to every image in order to show correctly. This background-position must always have negative values, because our background image must move left, to reveal the different images.
We must make every image inside the sprite move to the top left corner, because that is the spot where we begin seeing the image. That corner is equal to 0px in X, 0px in Y.

My Sprite, however has a left and top leftover of 2px, so we must take that into account when we define the background-position of the elements.

2px Leftover in the CSS Sprite

Remember the first value of background-position, is horizontal (x-axis) and the second one is vertical (y-axis). Let's finish our wolf. Our wolf must move 196px left and 2px up.

Defining the background-position of an image in the Sprite

.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}

.application {height:61px;}

/* Monsters */

.doctor {width:103px;}

.octopus {width:89px;}

.wolf {width:115px; background-position:-196px -2px;}

.star {width:126px;} .dog {width:128px;}

/* Applications -*/

.css {width:61px;}

.activityMonitor {width:58px;}

.dashboard {width:51px;}

.quicktime {width:53px;}

.scanner {width:74px;}

Now let's finish all our images using the same method:

.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}

.application {height:61px;}

/* Monsters */

.doctor {width:103px; background-position:-2px -2px;}

.octopus {width:89px; background-position:-106px -2px;} .wolf {width:115px; background-position:-196px -2px;}

.star {width:126px; background-position:-312px -2px;}

.dog {width:128px; background-position:-439px -2px;}

/* Applications -*/

.css {width:61px; background-position:-2px -133px;}

.activityMonitor {width:58px; background-position:-64px -133px;}

.dashboard {width:51px; background-position:-123px -133px;}

.quicktime {width:53px; background-position:-175px -133px;}

.scanner {width:74px; background-position:-229px -133px;}

Take a look at the Y-positioning of the elements. It's the same for all the monsters, and all the applications. That is because they are aligned in the same vertical position; ergo, they all share the same distance to the top edge.

Step 4: Creating our HTML code (piece of cake)

Define de source as the transparent 1PX x 1PX gif image we created before, apply the clases and it's sprite time!

Limitations of this method

For a CSS sprite image to work, it must always have a width, height and background-position. If you don't define the width or height of the element, you will see the whole sprite in that image. Quite obvious but is good to mention.

...
0
0