Any examples to know about css sprites?

Question

I know about css sprites.. Now i want some examples of css sprites....

• How did you manage to get css sprites work?

Answer 1

http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/

http://www.w3schools.com/css/css_positioning.asp

http://template.joomlart.com/ja_iris/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=29

Answer 2

If you are using Firefox here is a simple way to get an idea of what a sprite is. Go to yahoo.com, right-click and View Page Info, click Media. Look for a file name having "sprite" in it.

This is one of the links: http://d.yimg.com/a/i/ww/met/gsprite_071309.gif

You will see many background gradient images. You can use this file to play with. Now you have to adjust background position in your CSS depending on which background you want to use, like this:

background-image: url('http://d.yimg.com/a/i/ww/met/gsprite_071309.gif') left -30px repeat-x;

This should give you an idea of how to manage sprites.

Answer 3

If you are looking to create a CSS sprite - you can check out the site spriteme.org, which is very cool and shows you how to easily create a CSS sprite.

For a nice example you can check out this page:

http://www.programmerinterview.com/index.php/general-miscellaneous/css-sprite-example-and-tutorial/

Gives a good explanation and shows how the website owner uses a sprite.

Answer 4

I use them for button images. I use the top half of an image for the normal button state and the bottom half for the mouse-over state. That way the mouse over image is loaded when the page loads and there's no delay which just looks bad and slow. CSS code is here.

Answer 5

I usaully use the CSS background property. This property allows you to set a scroll argument of top and left as you can see in the example below. So the idea is to create one image with all states and simply position it based on the event like hover or other custom event in which you alter the elements CSS. I hope this helps.

.mySprite a
{
    background: transparent url(/images/spriteButton.gif) no-repeat scroll 0 0
}

.mySprite a:hover
{
    background: transparent url(/images/spriteButton.gif) no-repeat scroll 30 0
}

Answer 6

Check out this page:

http://www.tutorialrepublic.com/css-tutorial/css-sprites.php

It has a great interactive example and everything you need to know about CSS Sprite.