Css-Sprite-Generator

Fasst mehrere hochgeladene Bilder (PNG, JPEG oder SVG) in einem einzelnen PNG-Sprite-Sheet zusammen, das auf einem Canvas gerendert wird, und gibt dazu passende CSS background-position-Regeln aus. Drei Layouts werden angeboten: horizontal, vertical und packed (zeilenumbruchbasiert). Optional kann eine Pixel-Padding zwischen den Sprites eingefügt werden.

1. Klicken Sie auf die Upload-Ablagefläche oder ziehen Sie Bilddateien dorthin. PNG, JPEG und SVG werden akzeptiert; Nicht-Bild-Dateien werden herausgefiltert. 2. Wählen Sie ein Layout (Horizontal, Vertical, Packed) und optional Padding in Pixeln (0-100). 3. Klicken Sie auf Generate. Eine Sprite-Vorschau erscheint auf einem Karo-Hintergrund. 4. Klicken Sie auf Download, um sprite.png zu speichern, und verwenden Sie Copy CSS, um die generierten CSS-Regeln zu kopieren.

Horizontal platziert Bilder von links nach rechts in einer einzelnen Reihe, deren Höhe dem höchsten Bild entspricht. Vertical stapelt sie von oben nach unten in einer Spalte, deren Breite dem breitesten Bild entspricht. Packed bricht in Zeilen um, basierend auf einer Breite, die aus ceil(sqrt(count)) mal dem breitesten Bild abgeleitet wird. Das generierte CSS gibt pro Bild eine '.icon-<name>'-Klasse aus, mit width, height, einer 'background: url(sprite.png) no-repeat'-Deklaration und einer negativen background-position. Dateinamen werden um ihre Erweiterung bereinigt und zu [a-zA-Z0-9_-] normalisiert.