Generator CSS sprites

CSS Sprite Generator

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.

This technique can be very effective in improving the performance of the site, especially in situations where many small images, such as menu icons, are used. Yahoo !, for example, uses this technique for this.

CSS Sprites Generator

Drag in the field of the image or select by clicking the Choose files button.
As a result, we get a picture of the sprite in .PNG and CSS code, which obviously is worth doping itself, because you will get a complete code for each image.

Drag in the field of the image or select by clicking the Choose files button.
As a result, we get a picture of the sprite in .PNG and CSS code, which obviously is worth doping itself, because you will get a complete code for each image.