CSS-spritegenerator

Kombinerer flere opplastede bilder til et enkelt PNG-spriteark og genererer den tilhørende background-position-CSS-en. Tre layouttyper støttes (horizontal, vertical og grid), med valgfri padding mellom fliser og et konfigurerbart kolonneantall for grid-layout. All sammensetting skjer på et canvas i nettleseren din; ingen bilder lastes opp noe sted.

1. Klikk på opplastingsområdet eller dra bildefiler over det for å legge dem til (flere filer støttes). 2. Velg en layout (horizontal, vertical, grid), og for grid angir du kolonneantallet. 3. Angi eventuelt padding i piksler mellom flisene. 4. Klikk Generate Sprite for å bygge arket på nytt, deretter Download Sprite for å laste ned PNG-en og Copy CSS for å kopiere .icon-*-reglene.

horizontal stables bilder fra venstre mot høyre med det høyeste bildet som radhøyde. vertical stables ovenfra og ned med det bredeste bildet som kolonnebredde. grid pakker bilder inn i et kolonne-dominerende rutenett der hver kolonne og rad er dimensjonert etter sitt største medlem. Den genererte CSS-en bruker klassenavn utledet fra filnavnet (filtypen fjernes, ikke-alfanumeriske tegn erstattes med -), f.eks. .icon-home { width; height; background: url('sprite.png') no-repeat; background-position: -Xpx -Ypx; }. Utdata-PNG-en eksporteres via canvas.toDataURL og er alltid PNG uavhengig av inndataformat.