CSS-spritegenerator

Kombinerer flere opplastede bilder (PNG, JPEG eller SVG) til et enkelt PNG-sprite-ark gjengitt på et lerret, og sender ut matchende CSS bakgrunns-posisjons-regler. Tre layouter tilbyr: horisontal, vertikal og pakket (rad-bryt). Valgfri piksel-utfylling kan settes inn mellom spriter.

1. Klikk opplastingsslepssonen eller dra bildefiler til den. PNG, JPEG og SVG godtas; ikke-bilde-filer filtreres ut. 2. Velg en layout (Horisontal, Vertikal, Pakket) og valgfri utfylling i piksler (0-100). 3. Klikk Generer. En sprite-forhåndsvisning vises på et sjakkbrett-bakgrunn. 4. Klikk Last ned for å lagre sprite.png, og bruk Kopier CSS for å kopiere de genererte CSS-reglene.

Horisontal plasserer bilder venstre-til-høyre i én rad hvis høyde liker det høyeste bildet. Vertikal stabler dem topp-til-bunn i en kolonne hvis bredde liker det bredeste bildet. Pakket brytes til rader basert på en bredde utledet fra ceil(sqrt(count)) ganger det bredeste bildet. Den genererte CSS sender ut én '.icon-<navn>'-klasse per bilde, med bredde, høyde, en 'background: url(sprite.png) no-repeat'-deklarasjon og en negativ background-position. Filnavn stripes for sin utvidelse og renses til [a-zA-Z0-9_-].