CSS-spritegenerator
Gratis online CSS-spritegenerator geen installatie nodig
Over CSS Sprite Generator
Combineert meerdere geüploade afbeeldingen (PNG, JPEG of SVG) tot één PNG-sprite-sheet dat op een canvas wordt gerenderd, en geeft bijbehorende CSS background-position-regels uit. Er worden drie lay-outs aangeboden: horizontal, vertical en packed (regelterugloop). Optioneel kan pixel-padding tussen de sprites worden ingevoegd.
Hoe te gebruiken
1. Klik op de upload-zone of sleep afbeeldingsbestanden erop. PNG, JPEG en SVG worden geaccepteerd; niet-afbeeldingsbestanden worden uitgefilterd. 2. Kies een Layout (Horizontal, Vertical, Packed) en optioneel Padding in pixels (0-100). 3. Klik op Generate. Er verschijnt een sprite-voorbeeld op een schaakbordachtergrond. 4. Klik op Download om sprite.png op te slaan, en gebruik Copy CSS om de gegenereerde CSS-regels te kopiëren.
Lay-outs en CSS-uitvoer
Horizontal plaatst afbeeldingen van links naar rechts in één rij waarvan de hoogte gelijk is aan die van de langste afbeelding. Vertical stapelt ze van boven naar beneden in één kolom waarvan de breedte gelijk is aan die van de breedste afbeelding. Packed breekt regels af op basis van een breedte afgeleid van ceil(sqrt(count)) maal de breedste afbeelding. De gegenereerde CSS geeft per afbeelding één '.icon-<name>'-klasse uit, met width, height, een 'background: url(sprite.png) no-repeat'-declaratie en een negatieve background-position. Bestandsnamen worden ontdaan van hun extensie en genormaliseerd naar [a-zA-Z0-9_-].
▶Welke afbeeldingsformaten worden ondersteund?
▶Waarom renderen SVG's op onverwachte grootte?
▶Verwijst de gegenereerde CSS naar de juiste afbeeldings-URL?
▶Is de packed-lay-out een echte bin-packing?
Als deze tool je heeft geholpen, denk dan eens aan het geven van een kop koffie aan mij.
Koop me een kop koffie.