CSS Sprite Tool

Question

css

What are the best tools for working with CSS sprites and why?

Thank you very much for the detailed answers!

Answer 1

I find it easiest to use Compass or imageMagick to create sprites
ImageMagick example: convert *png -append result-sprite.png
Compass example:
@import "icon/*.png";
@include all-icon-sprites;
.new { @include icon-sprite(new); }
.edit { @include icon-sprite(edit); }
.save { @include icon-sprite(save); }
.delete { @include icon-sprite(delete); }

Answer 2

Here is a very powerful thing, Compass . I'm not sure how convenient it will be for you, but in general, it allows you to combine all the icons into one at the assembly or deployment stage, greatly reducing the number of requests to the server if there are a lot of icons on the page at once.
It’s convenient that in the original it’s still a bunch of icons, and why you don’t need to manually glue each time.
Documentation is not dense, but you can find examples on blogs.

Answer 3

I use Photoshop just because I'm used to it. Many people praise the www.spritebox.net service and maybe I will switch to it myself soon. The convenience of the service is that it has more tools for working with sprites. For example, you can immediately create CSS.