CSS Sprites Automation

Recently I dealed with CSS sprites. It's working fine.

I created a sprite, the .css-file and html-structure. It looks like

.sprites{
         background-image:url('../img/sprite.png');
         background-color:transpar开发者_JAVA百科ent;
         background-repeat:no-repeat;
         height:44px;
         width:44px;
  }
.pic1            {background-position:0 0;}
.pic2            {background-position:-44px 0;}



 <div class="outer"><div class="sprites ${image}"></div></div>

${image} chooses the class if a condition is true.

I create the sprite, css and html manually. I could have used a generator, but the code would have been the same.

Is there a way to create sprites and the css autmatically with e.g. java? If there was a folder with 50 images the program -which has to be written I guess- shall create a sprite and the relevant css-attributes itself. Is this possible? Have you heard of such a program yet?

It is possible.

If you are using .net, check out http://www.RequestReduce.com. It not only creates the sprite file automatically, but it does it on the fly through an HttpModule along with merging and minifying all CSS. It lso optimizes the sprite image using quantization and lossless compression and it handles the serving of the generated files using ETags and Expires headers to ensure optimal browser caching. The setup is trivial involving just a simple web.config change. See my blog post about its adoption by the Microsoft Visual Studio and MSDN Samples gallery.

You don't need to arrange your images in any particular folder or format since RequestReduce pulls the CSS and images via HTTP. So your css and sprites could even be hosted elsewhere and it would work.

This tool might of help to someone referring to this later. http://www.spritecss.com/