CSS-sprite-generator

Kombinerar flera uppladdade bilder (PNG, JPEG eller SVG) till en enda PNG-sprite-ark renderad på en canvas och emitterar matchande CSS background-position-regler. Tre layouter erbjuds: horisontell, vertikal och packad (radbrytning). Valfria pixelpadding kan infogas mellan sprites.

1. Klicka på laddnings-zonen eller dra bildfiler till den. PNG, JPEG och SVG accepteras; icke-bildfiler filtreras bort. 2. Välj en Layout (Horisontell, Vertikal, Packad) och valfri Padding i pixlar (0-100). 3. Klicka Generera. En sprite-förhandsgranskning visas på en schackrutig bakgrund. 4. Klicka Ladda ner för att spara sprite.png och använd Kopiera CSS för att kopiera de genererade CSS-reglerna.

Horisontell placerar bilder vänster till höger i en enda rad vars höjd likar den högsta bilden. Vertikal staplar dem topp till botten i en kolumn vars bredd likar den bredaste bilden. Packad bryter till rader baserat på en bredd härledd från ceil(sqrt(count)) gånger den bredaste bilden. Den genererade CSS emitterar en '.icon-<namn>'-klass per bild, med width, height, ett 'background: url(sprite.png) no-repeat'-deklaration och en negativ background-position. Filnamn rensas från deras tillägg och saneras till [a-zA-Z0-9_-].