Generador de Sprite CSS

Combina varias imágenes subidas (PNG, JPEG o SVG) en una única hoja de sprite PNG renderizada en un canvas y emite las reglas CSS background-position correspondientes. Se ofrecen tres diseños: horizontal, vertical y packed (ajuste por filas). Se puede insertar opcionalmente un padding en píxeles entre los sprites.

1. Haga clic en la zona de carga o arrastre archivos de imagen sobre ella. Se aceptan PNG, JPEG y SVG; los archivos que no sean imágenes se filtran. 2. Elija un Layout (Horizontal, Vertical, Packed) y un Padding opcional en píxeles (0-100). 3. Haga clic en Generate. Aparecerá una vista previa del sprite sobre un fondo de tablero de ajedrez. 4. Haga clic en Download para guardar sprite.png y use Copy CSS para copiar las reglas CSS generadas.

Horizontal coloca las imágenes de izquierda a derecha en una sola fila cuya altura es igual a la de la imagen más alta. Vertical las apila de arriba abajo en una columna cuyo ancho es igual al de la imagen más ancha. Packed salta de línea según un ancho derivado de ceil(sqrt(count)) por el ancho de la imagen más ancha. El CSS generado emite una clase '.icon-<name>' por imagen, con width, height, una declaración 'background: url(sprite.png) no-repeat' y un background-position negativo. Los nombres de archivo se limpian de su extensión y se normalizan a [a-zA-Z0-9_-].