1

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:transparent;
         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?

jq5
  • 53
  • 2
  • I haven't heard of a program yet that will do it all automatically yet, but I've used Sprite Cow which generates the position values for you - is that what you're looking for? – kinakuta Jul 01 '11 at 10:18
  • Unfortunately not. Generators do the work, yes, but I'm really looking for a program or script detecting the images in my folders, creating a sprite and the relevant css-attributes. – jq5 Jul 01 '11 at 10:23
  • Your question looks a little bit too vague to me. You should specify at least a programming language, and include a tag for it, so more people will be able to help you out. – Jose Faeti Sep 11 '11 at 09:43
  • http://stackoverflow.com/questions/527336 – BlueRaja - Danny Pflughoeft May 22 '13 at 21:06

3 Answers3

1

It is possible.

Litek
  • 4,888
  • 1
  • 24
  • 28
  • It just detects the images of the client-sided source-code, doesn't it? – jq5 Jul 01 '11 at 10:20
  • You create "normal" stylesheet with separate images and it converts them for you. The class names has to come form somewhere so starting with files only and no stylesheet would mean that you have to name your images appropriately or change every classname/id in output stylesheet. – Litek Jul 01 '11 at 10:26
  • 1
    Yer, well. I already did the work and there are a lot of generators. I'm looking for code detecting all images in my folders(kind of server-sided). Tahnk you anyway. – jq5 Jul 01 '11 at 10:33
  • 2
    @Litek Care to add some context for that link? Your answer is not very helpful on its own without explaining a little about what you're linking to. – Amanda S Jul 02 '11 at 01:00
1

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.

Matt Wrock
  • 6,590
  • 29
  • 23
0

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

Rupesh Jain
  • 168
  • 3
  • 11