What is CSS Sprites?

What is CSS Sprites? and how can we implement it.

 

This is sprite image
One image for different states of the menu.



We use the images for different states. :active, :hover, :visited
Using position of image we replace them.
Example
We have 3 state imeges. Height - 450px.



ul#nav li a {
width:300px;
background:url(../images/picture.png) no-repeat top center;
}

This example use top image.

ul#nav li a:hover {
width:300px;
background:url(../images/picture.png) no-repeat center center; //use center image
}

ul#nav li a:visited {
width:300px;
background:url(../images/picture.png) no-repeat bottom center; //use bottom image
}

More read

http://css-tricks.com/css-sprites/
http://www.smashingmagazine.com/200...f-css-sprites-techniques-tools-and-tutorials/


Css sprites generator
http://csssprites.com/
http://css-sprit.es/

 

another benefit of sprites is that it cuts down on http requests. You load one image instead of multiple images.

 

Second that Smashing Magazine link! That is an awesome collection.
Do a search for sprites and you will find many other good pages there.

 

Awesome post, I was wondering the same thing and this will cut down on a lot of HTTP request and increase the YSlow speed of my site.

 

Hi,
An image sprite is a collection of images put into a single image.A web page with many images can take a long time to load and generates multiple server requests.

Example:-

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

Thanks

 

here are the couple of tips while using sprites
- Aviod "right" or "bottom" in css positioning instead use explicit positioning in pixels
- if you are spriting tiny images, give enough space in between so other images won't show up

 

just go in google and type "css sprites menu" and i`m sure there will be a lot of posts!

 

Data URI are the new CSS sprites.
They're much easier to maintain, and still allow you to cut down on HTTP requests, by bundling images into one style sheet.

 

the only issue is DataURI is not supported in IE7 and under. So if you are supporting those browsers you still need additional styles or conditional statements to accommodate those browsers.

 

Data URIs do indeed cut down on HTTP requests but as AtSeaDesign said they are not supported by IE7 and there is only partial support in IE8 because it limits data URIs to a maximum length of 32 KB. So for now, if you want to cut down on HTTP requests (particularly useful when using a CMS like Drupal), sprites are the way to go.

 

I did read somewhere that they are applicable to images in emails though.

 

Sprites can save you a lot of time and energy on a large site. I find, once the site layout if built in PS or ID, the first thing I do is create a large sprite map of all common images used.
Cuts down on development time along with HTTP requests.

 

Sprites are used for hovers. Normally 2 images will be used for menus (one for active and other for hover). But in sprites a single image contains 2 block and you specify the image position for it to work.

Learn more in w3schools.com