CSS Sprite-generator

Kombinerar flera uppladdade bilder till ett enda PNG-spritesheet och genererar den matchande background-position-CSS:en. Tre layouter stöds (horisontell, vertikal och rutnät), med valfri padding mellan bilderna och ett konfigurerbart antal kolumner för rutnätslayout. All kompositering sker på en canvas i din webbläsare; inga bilder laddas upp någonstans.

1. Klicka på uppladdningsområdet eller dra bildfiler till det för att lägga till dem (flera filer stöds). 2. Välj en layout (horizontal, vertical, grid) och ställ, för grid, in antalet kolumner. 3. Ange eventuellt padding i pixlar mellan bilderna. 4. Klicka på Generate Sprite för att bygga om sheetet, sedan Download Sprite för PNG-filen och Copy CSS för .icon-*-reglerna.

horizontal staplar bilder från vänster till höger med den högsta bilden som radhöjd. vertical staplar uppifrån och ner med den bredaste bilden som kolumnbredd. grid packar bilder i ett kolumnvis rutnät där varje kolumn och rad storlekssätts efter sin största medlem. Den genererade CSS:en använder klassnamn som härleds från filnamnet (filändelsen tas bort, icke-alfanumeriska tecken ersätts med -), t.ex. .icon-home { width; height; background: url('sprite.png') no-repeat; background-position: -Xpx -Ypx; }. PNG-utdatan exporteras via canvas.toDataURL och är alltid PNG oavsett inmatningsformat.