Tools to make CSS sprites?

css css-sprites web-performance
Simon_Weaver picture Simon_Weaver · Feb 9, 2009 · Viewed 60.1k times · Source

Are there any good tools to make css sprites?

IDEALLY I'd want to give it a directory of images and an existing .css file that refers to those images and have it create a big image optimized with all the little images AND change my .css file to refer to those images.

At the least I'd want it to take a directory of images and generate a big sprite and the .css necessary to use each as a background.

Are there any good photoshop plugins or fully blown apps to do this?

Answer

Brian Grinstead picture Brian Grinstead · Nov 15, 2010

Instant Sprite is an in-browser CSS sprite generator I'm working on. It's really fast, but doesn't have quite as many features as some of the others. It currently only works in Firefox or Chrome, since it uses JavaScript FileReader and HTML Canvas to generate the sprites inside the web browser without uploads.

Related questions

Can I add color to bootstrap icons only using CSS?

Twitter's bootstrap uses Icons by Glyphicons. They are "available in dark gray and white" by default: Is it possible to use some CSS trickery to change the colors of the icons? I was hoping for some other css3 brilliance that …

Read More
How can I scale an image in a CSS sprite

In this article, http://css-tricks.com/css-sprites/, it talks about how can I crop off a smaller image from 1 bigger image. Can you please tell me if it is possible/how I can crop off a smaller image and then …

Read More
Clip/Crop background-image with CSS

I have this HTML: <div id="graphic">lorem ipsum</div> with this CSS: #graphic { background-image: url(image.jpg); width: 200px; height: 100px;} The background image I'm applying is 200x100 px, but I only want to display …

Read More