Creating CSS sprites with TexturePacker

Learn how to create a css sprite sheet with TexturePacker and iclude it into your webpage.
This is the old version of the tutorial. Please visit the new version at:
How to create Responsive Retina CSS sprites
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 sheet 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:


The file extension -hover is important since this will be used as part of the css selector.
Drag all the files you want to add to the right pane of TexturePacker:

This will create a css style sheet looking like this:
.sprite {
display:inline-block;
overflow:hidden;
background-repeat: no-repeat;
background-image:url(css.png);
}
.download {
width:80px;
height:31px;
background-position: -160px -160px
}
.download:hover {
width:80px;
height:32px;
background-position: -80px -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:
<span class="sprite download"></span>
In case you are not satisfied with the output format you can download the new 3.0.0 version and create your own template - just like you need it.