CSS Sprite-generator

Kombinerer flere oploade billeder (PNG, JPEG eller SVG) til en enkelt PNG-sprite-side, som renderes på en canvas, og genererer tilsvarende CSS-background-position-regler. Tre layout-oplysninger er tilgængelige: horisontalt, vertikalt og pakket (row-wrap). Valgfrit pixel-padding kan indføres mellem sprite’erne.

1. Klik på upload-dropzone’en eller træk billedfiler til den. PNG, JPEG og SVG accepteres; ikke-billedfiler filtreres bort. 2. Vælg en layout (Horisontal, Vertikal, Pakket) samt valgfrit padding i pikser (0-100). 3. Klik på Generer. En forudsyn af sprite’en vises på et skakbordsmotiv. 4. Klik på Downloade for at gemme sprite.png, og brug Kopier CSS for at kopiere de genererede CSS-regler.

Horisontalt placeres billeder fra venstre til højre i en enkelt række, hvor højden er lig med den højeste billede. Vertikalt stapleres de fra topp til bund i en kolonne, hvor bredden er lig med det bredeste billede. Packed wrapes ind i rækker baseret på en bredde, der er afledt fra ceil(sqrt(count)) gange det bredeste billede. Den genererede CSS udsender en '.icon-<name>'-klasse for hver af billederne, med bredde, højde, en declaration ‘background: url(sprite.png) no-repeat’ og en negativ background-position. Filnavne bliver fjernet af deres ekstension og renset til [a-zA-Z0-9_-].