CSS-spritegenerator

Combineert meerdere geüploade afbeeldingen (PNG, JPEG of SVG) tot één PNG-sprite-sheet dat op een canvas wordt gerenderd, en geeft bijbehorende CSS background-position-regels uit. Er worden drie lay-outs aangeboden: horizontal, vertical en packed (regelterugloop). Optioneel kan pixel-padding tussen de sprites worden ingevoegd.

1. Klik op de upload-zone of sleep afbeeldingsbestanden erop. PNG, JPEG en SVG worden geaccepteerd; niet-afbeeldingsbestanden worden uitgefilterd. 2. Kies een Layout (Horizontal, Vertical, Packed) en optioneel Padding in pixels (0-100). 3. Klik op Generate. Er verschijnt een sprite-voorbeeld op een schaakbordachtergrond. 4. Klik op Download om sprite.png op te slaan, en gebruik Copy CSS om de gegenereerde CSS-regels te kopiëren.

Horizontal plaatst afbeeldingen van links naar rechts in één rij waarvan de hoogte gelijk is aan die van de langste afbeelding. Vertical stapelt ze van boven naar beneden in één kolom waarvan de breedte gelijk is aan die van de breedste afbeelding. Packed breekt regels af op basis van een breedte afgeleid van ceil(sqrt(count)) maal de breedste afbeelding. De gegenereerde CSS geeft per afbeelding één '.icon-<name>'-klasse uit, met width, height, een 'background: url(sprite.png) no-repeat'-declaratie en een negatieve background-position. Bestandsnamen worden ontdaan van hun extensie en genormaliseerd naar [a-zA-Z0-9_-].