Anyway, I found it convenient to use good ol' ImageMagick. This page goes into some detail, but the net-net was doing:
convert img1.png img2.png img3.png -append spritesheet.png
was all I needed. That gave me a single .png with all the images in a vertical stack. I then made a quick perl script to generate the css, something like
.img {
width:50px;
height:50px;
background-image: url('spritesheet.png');
}
.img.thing1{
background-position: 0px 0px
}
.img.thing2{
background-position: 0px -50px
}
(I had 25 of these to do). The important thing here is the offset, which is increasingly negative for each subsequent image.
The HTML was then something like
<div class="img thing1"></div>
<div class="img thing2"></div>
This raises best practices / style questions. W3Schools recommends using the img tag with a placeholder for the src (lest your html be invalid), ala:
<img class="thing1" src="img_trans.gif">
I see that it's kind of cool to keep things an image (even better would be list item tags or other semantically meaningful html tags) but going back to the old "transparent GIF" placeholder thing gives me the creeps!
<img class="thing1" src="img_trans.gif">
I see that it's kind of cool to keep things an image (even better would be list item tags or other semantically meaningful html tags) but going back to the old "transparent GIF" placeholder thing gives me the creeps!
Also you can run your generated file through an online image compressor... and there are even other online tools to smush the image together and give you the resulting CSS.