CSS Sprite-generator

Kombiner flere oploadede billeder til en enkelt PNG-sprite-side og generere den tilsvarende CSS for background-position. Tre layout-tilstande er støttet (horisontalt, vertikalt og grid), med valgfrit padding mellem elementene og en konfigurerbar antal kolonner for grid-layoutet. Alle kompositeringer sker på en canvas i din browser; ingen billeder uploades någonstans.

1. Klik på uploadområdet eller dræn imagefiler til det for at tilføje dem (mere filer er tilladt). 2. Vælg en layout (horisontal, vertikal, grid) og, for grid, sæt antallet kolonner. 3. Sæt eventuelt padding i pikser mellem tilene. 4. Klik på Generer Sprite for at omdanne bladet, derefter Download Sprite for PNG-filen og Kopier CSS for .icon-*-reglerne.

Horisontale rækker sorterer billeder fra venstre til højre, hvor den højeste billede fungerer som rækkehøjde. Vertikale rækker sorterer billeder fra topp til bund, hvor det bredeste billede fungerer som kolombredde. Griddet pakker billeder i en kolommajor-gridd, hvor hver kolon og række er anpasset til sin største element. Den genererede CSS-bruger klassnavne, der er aflejet fra filnavnet (udvidelsen fjernet, ikke-alfanumeriske tegn erstattet med -), f.eks. .icon-home { width; height; background: url('sprite.png') no-repeat; background-position: -Xpx -Ypx; }. Den genererede PNG-fil eksporteres via canvas.toDataURL og er alltid i PNG-format, uanset indgangsformatet.