Generatore di sprite CSS

Combina più immagini caricate (PNG, JPEG o SVG) in un unico sprite sheet PNG renderizzato su canvas ed emette regole CSS background-position corrispondenti. Vengono offerti tre layout: horizontal, vertical e packed (a capo automatico per riga). Un padding opzionale in pixel può essere inserito tra gli sprite.

1. Fare clic sull'area di upload o trascinarvi sopra file immagine. Sono accettati PNG, JPEG ed SVG; i file non immagine vengono filtrati. 2. Scegliere un Layout (Horizontal, Vertical, Packed) e un eventuale Padding in pixel (0-100). 3. Fare clic su Generate. Apparirà un'anteprima dello sprite su uno sfondo a scacchiera. 4. Fare clic su Download per salvare sprite.png e usare Copy CSS per copiare le regole CSS generate.

Horizontal dispone le immagini da sinistra a destra in una sola riga la cui altezza è pari a quella dell'immagine più alta. Vertical le impila dall'alto verso il basso in una colonna la cui larghezza è pari a quella dell'immagine più larga. Packed va a capo in righe in base a una larghezza derivata da ceil(sqrt(count)) per la larghezza dell'immagine più larga. Il CSS generato emette una classe '.icon-<name>' per ogni immagine, con width, height, una dichiarazione 'background: url(sprite.png) no-repeat' e un background-position negativo. I nomi file vengono privati dell'estensione e normalizzati a [a-zA-Z0-9_-].