CSS-sprite-generaattori

Yhdistää useita ladattuja kuvia (PNG, JPEG tai SVG) yhdeksi canvasille renderöitäväksi PNG-sprite-arkiksi ja tuottaa vastaavat CSS background-position -säännöt. Kolme asettelua on tarjolla: vaakasuuntainen, pystysuuntainen ja pakattu (rivikääre). Valinnainen pikselitäyte voidaan lisätä spritejen väliin.

1. Napsauta latauksen pudotusaluetta tai raahaa kuvatiedostot siihen. PNG, JPEG ja SVG hyväksytään; ei-kuvatiedostot suodatetaan pois. 2. Valitse asettelu (Vaakasuuntainen, Pystysuuntainen, Pakattu) ja valinnainen täyte pikseleinä (0-100). 3. Napsauta Luo. Sprite-esikatselu ilmestyy shakkilautataustalle. 4. Napsauta Lataa tallentaaksesi sprite.png ja käytä Kopioi CSS luotujen CSS-sääntöjen kopioimiseen.

Vaakasuuntainen asettaa kuvat vasemmalta oikealle yhteen riviin, jonka korkeus on yhtä suuri kuin pisimmän kuvan korkeus. Pystysuuntainen pinoaa ne ylhäältä alaspäin sarakkeeseen, jonka leveys on yhtä suuri kuin leveimmän kuvan leveys. Pakattu käärii riveihin leveyden perusteella, joka johdetaan ceil(sqrt(count)) kertaa levein kuva. Luotu CSS antaa yhden '.icon-<name>' -luokan per kuva, jossa on leveys, korkeus, 'background: url(sprite.png) no-repeat' -määritys ja negatiivinen background-position. Tiedostonimien tunniste poistetaan ja ne puhdistetaan muotoon [a-zA-Z0-9_-].