• Embed Doc
  • Copy Link
  • Readcast
  • Collections
  • CommentGo Back
Download
 
CSS Sprites in under 10Minutes
 by Addy Osmani
So..what
is
a Sprite?
Back in 2004, a guy called Dave Shea came up with a simple CSS-based approach to using multiple-images across a website and combining them into a single
master image
. His concept was quite straight-forward -to show a single image from the master image you would use the background-position propertyin CSS to define the exact position of the image to display. It was versatile enough that you could usehover, active or focus effects using the same background-position property for any element displayed.
Why should I use them? It's easier to just slice my images separately, right?
CSS Sprites have a lot of different advantages. The first is that your users only need to download a singleimage file for the graphics on your page (and thus it can complete loading much quicker). Secondly, if youneed to update any of the graphics on your page, you only need to release a single image file live to havethe chances come into effect. Need to optimize all your images? A master image just requires one roundof optimization so you effectively cut down your work exponentially.
Before I learn how to use these Sprite things..who else is using them?
Everybody. Apple.com, Amazon, YouTube, CNN and even Digg.com use CSS Sprites for their graphics.There's even awebsiteat
http://css-sprit.es/
that helps you generate your own Sprites by uploading your image to their server.
Okay..so how are they done?
Lets take the example of a horizontal navigation menu. Normally you would do something like this to seteach of the background images for your menu items:
 
#nav li a {background:
none no-repeat left center}#nav li a.item1 {background-image:url('../img/image1.gif')}#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
 
#nav li a.item2 {background-image:url('../img/image2.gif')}#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
For 10 different images that's a whole 10 different HTTP requests that need to be made.
of 00

Leave a Comment

You must be to leave a comment.
Submit
Characters: ...
You must be to leave a comment.
Submit
Characters: ...