I'm a robot

Creating CSS sprites with TexturePacker

2011-07-28 Andreas Löw
There is an updated version of this blogpost available: CSS animation examples with TexturePacker

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:

download.png download button
download-hover.png download button hover

The 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:

TexturePacker css data format

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: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:

resulting sprite sheet

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.

I'm a robot