Générateur de sprites CSS

Combine plusieurs images téléversées (PNG, JPEG ou SVG) en une seule feuille de sprite PNG rendue sur un canvas et émet les règles CSS background-position correspondantes. Trois dispositions sont proposées : horizontal, vertical et packed (retour à la ligne par ligne). Une marge (padding) facultative en pixels peut être insérée entre les sprites.

1. Cliquez sur la zone de dépôt ou glissez-déposez des fichiers image dessus. Les formats PNG, JPEG et SVG sont acceptés ; les fichiers non image sont filtrés. 2. Choisissez une Layout (Horizontal, Vertical, Packed) et un Padding facultatif en pixels (0-100). 3. Cliquez sur Generate. Un aperçu du sprite apparaît sur un fond en damier. 4. Cliquez sur Download pour enregistrer sprite.png, et utilisez Copy CSS pour copier les règles CSS générées.

Horizontal place les images de gauche à droite sur une seule ligne dont la hauteur est égale à celle de l'image la plus haute. Vertical les empile de haut en bas dans une colonne dont la largeur est égale à celle de l'image la plus large. Packed effectue des retours à la ligne selon une largeur dérivée de ceil(sqrt(count)) fois la largeur de l'image la plus large. Le CSS généré émet une classe '.icon-<name>' par image, avec width, height, une déclaration 'background: url(sprite.png) no-repeat' et un background-position négatif. Les noms de fichiers sont dépouillés de leur extension et normalisés vers [a-zA-Z0-9_-].