Ph4 / USA / Laie

Service from Projectfondue, CSS sprite generator.

How it works

1. We collect the required pictures in a folder (well, it's more convenient for me personally).
2. Click on the site blue menu item CLEAR to remove the existing icons for the example.
3. Customize:
   • You specify the distance between the pictures, and to the edge. They offered 50 right away, but that's a lot. Zero did not pass, then we put 1, which is quite enough.
   • You can set the background color or make it transparent.
   • Names to variables will be assigned by the names of pictures in the archive. In the form, you can add a prefix or suffix to all the names, or leave the field blank.
   • You can make a picture compact, vertical or horizontal.
4. Drag and drop files from our folder into this field.
5. Once your icons have become clear, not pale and flickering, as in the beginning, the sprite is ready.
6. Click the green Download button, followed by the green Spritesheet and Stylesheet buttons.
7. The resulting text is corrected for our site.