Gerador de Sprite CSS

Combina várias imagens enviadas (PNG, JPEG ou SVG) em uma única folha de sprite PNG renderizada em um canvas e emite regras CSS background-position correspondentes. São oferecidos três layouts: horizontal, vertical e packed (quebra de linha por linha). Um padding opcional em pixels pode ser inserido entre os sprites.

1. Clique na área de upload ou arraste arquivos de imagem sobre ela. PNG, JPEG e SVG são aceitos; arquivos que não sejam imagens são filtrados. 2. Escolha um Layout (Horizontal, Vertical, Packed) e um Padding opcional em pixels (0-100). 3. Clique em Generate. Uma pré-visualização do sprite aparece sobre um fundo de tabuleiro de xadrez. 4. Clique em Download para salvar sprite.png e use Copy CSS para copiar as regras CSS geradas.

Horizontal coloca as imagens da esquerda para a direita em uma única linha cuja altura é igual à da imagem mais alta. Vertical as empilha de cima para baixo em uma coluna cuja largura é igual à da imagem mais larga. Packed quebra em linhas com base em uma largura derivada de ceil(sqrt(count)) vezes a imagem mais larga. O CSS gerado emite uma classe '.icon-<name>' por imagem, com width, height, uma declaração 'background: url(sprite.png) no-repeat' e um background-position negativo. Os nomes de arquivo são privados de sua extensão e normalizados para [a-zA-Z0-9_-].