CSS Sprite sheets improve loading times for web pages – especially if you have many small graphics and icons on them. Instead of loading each single sprite the complete sheet is loaded at once as one big image. A CSS style sheets assigns the different images to the elements on the web page.
If you want to create a button with a hover effect you simply need 2 files:
download.png
download-hover.png
The extension “-hover” is important since this will be uses as part of the css selector.
Drag all the files you want to add to the right pane of TexturePacker:
Using TexturePacker to create CSS sprites
This will create a css style sheet looking like this:
display:inline-block;
overflow:hidden;
background-repeat: no-repeat;
background-image:url(css.png);
}
.download:hover {
width:80px;
height:32px;
background-position: -80px -160px
}
.download {
width:80px;
height:31px;
background-position: -160px -160px
}
With more buttons added the resulting image file looks like this:
Using the sprite is simple – just add the sprite sheet to the header of your web page and add this code to place a sprite:
Hello,
Actually I am now learning advanced technique of CSS but I am really confused about SPRITES. I am getting prob with positioning and will you pls explain me the positioning technique in details. How will I decide about position property.
Thanks for sharing
You can position the sprites by creating your own version of .sprite, e.g.
.mysprite { display:block; < ----------------- e.g. change this to block instead of inline-block overflow:hidden; background-repeat: no-repeat; background-image:url(css.png); }use
to place it.