CSS SpritesDawn Pedersen

Art Institute

What Are CSS Sprites?Back in the day, sprites were the images in

games that swapped one little image for another in a specific place on the screen.

The term has been appropriated by web designers to describe a CSS technique that is similar and very useful.

What Are CSS Sprites?Typically when we create graphical buttons, we

make two images: One for the regular state of the button.One for the hover state. The images on the right are designed to repeat-x.

With CSS Sprites these two images become one image.

By using the background position properties in CSS, we can choose:which part of our image will be displayed for the

inactive link which part will be displayed for the hover state

What Are CSS Sprites?The advantages are:

there are fewer files to keep track ofthere are fewer http requests made of the

serverthe file size for one larger image is smaller

than the sum of a bunch of smaller imagesThis may not seem like a big deal for two

images, but it adds up for more. Let’s take a look at an example.

CSS Sprites Exercise1. Download and unzip

http://blulob.com/ai/mm2203/docs/sprites.zip.

2. Take a look at buttons.psd with three buttons.

The first is for a normal state The second is for a hover state The third we will use when we

are on the destination page

3. We know from our guides that each button is 260 pixels wide and 60 pixels tall.

CSS Sprites Exercise4. Take a look at buttons.jpg” The image has

been flattened and cropped down to its final size (260px by 180px).

CSS Sprites Exercise5. Open index.html in a

browser and hover over each menu item.

CSS Sprites Exercise6. Open index.html and styles.css in

Dreamweaver in Code view. 7. Locate the CSS rules for #navigation li a

and #navigation li a:hover.8. Add the background

declarations as shown on the right to each of these rules:

background-image background-repeat background-position

CSS Sprites ExerciseA little explanation: Both rules use the same buttons.jpg image. Because we are creating buttons, we don’t want

the button background image to repeat. Because the <a> tag is set to

display: block and to a specific height and width, we do not see the rest of the background image.

Then the position on the hover state sets the y position to -60px. This shows the second button in the image file on hover.

CSS Sprites Exercise With just a little bit of basic math you can

display whichever image you need from the larger image.

Let’s continue with setting our image for the destination page, as we did previously.

CSS Sprites Exercise9. Add the following compound CSS rule to the

bottom of the CSS file (notice the background-position):

#page1 #page #sidebar #navigation .page1 a,#page2 #page #sidebar #navigation .page2 a,#page3 #page #sidebar #navigation .page3 a,#page4 #page #sidebar #navigation .page4 a,#page5 #page #sidebar #navigation .page5 a {

color: #900;background-image: url(buttons.jpg);background-repeat: no-repeat;cursor: default;background-position: 0px -120px;

}

CSS Sprites Exercise10.In index.html, add an id="page1"attribute to

the body tag.11.Add the following class attributes within the

menu:

12.In page2.html: Add an id="page2"attribute to the body tag Replace the navigation ul element with that

from index.html

CSS Sprites Exercise13.Test the site in a browser. 14.Click on the page 1 and page 2 buttons to

see the image rotation.

If you open the completed folder, you will see all the pages are made.

Open index.html in a browser and try the links out.

CSS Sprites Real-Life ExampleThis particular use of the sprite is called a

navigation matrix. Not only can you use the y axis to locate

particular graphics, but you can use the x axis too.

Check out the navigation in Apple’s website. Notice the roll over, active (when you press

the button down), and destination page states.

CSS Sprites Real-Life ExampleDigging into the code reveals how they did

this.Here is Apple’s navigation matrix.

Top row for normal stateSecond row for hover stateThird row for active stateFourth row for when you are on that particular

pageEach individual button is accessed one at a

time with coordinates.

CSS Sprites Real-Life ExampleIf you go to this page to see the CSS being

used, it should be recognizable: http://images.apple.com/global/styles/base.css

Notice the position coordinates. They are what is pulling up the individual images.

CSS Sprites ResourcesThere is a nice little tutorial on this particular

navigation trick here:http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/ It’s a little long winded, but cool to watch anyway.

CSS Sprites ResourcesSprites are not just used

for navigation, but any sort of repeating icons and graphics used on your sites.

Check out this tutorial:http://websitetips.com/articles/css/sprites/ All of those little green icons are in one graphic file.

CSS Sprites ResourcesNeed help generating some sprite images and CSS? Try this site: http://spritegen.website-performance.org/