Brindes semanais: 12 geradores de Sprite CSS gratuitos
Os sprites de imagem CSS permitem reduzir drasticamente o número de solicitações HTTP em um site, combinando muitas ou todas as imagens do site em um único arquivo. Esse arquivo pode ser usado em conjunto com o posicionamento em segundo plano CSS para implementar imagens individuais.
A desvantagem dessa técnica é que é um processo minucioso e envolvido que exige que você combine manualmente suas imagens e mexa com o CSS para fazer com que cada imagem seja exibida corretamente. Felizmente, existem várias ferramentas online gratuitas que automatizam completamente esse processo. Hoje, temos uma incrível coleção de doze dessas ferramentas, cada uma com uma visão única do processo de geração de sprites. Esteja você procurando criar um sprite a partir de uma pasta de imagens ou converter um site existente, temos as ferramentas para ajudá-lo a realizar o trabalho em segundos.
Gerador de Sprite CSS: Fondue do projeto
Um bom gerador com muitas opções. Você carrega um .ZIP de todas as imagens que deseja transformar em um sprite e ele cuida do resto. Ele mostra uma imagem e todos os vários valores de "posição de fundo" que você precisa.
Gerador de CSS Sprites
Feio e com bugs, este gerador de sprites obriga a carregar cada imagem individualmente. Experimente para ver o que pensa, mas sinceramente, existem alternativas melhores nesta lista.
Sprites CSS - Construtor / Gerador de Sprites CSS on-line
Este é bem legal. Você pode facilmente enviar um monte de imagens de uma só vez, escolher o tipo de arquivo de saída e até optar por obter o código Sass e CSS como resultado. Existem também algumas opções legais para gerar automaticamente efeitos de foco, como dessaturados e invertidos. No geral bastante impressionante, não deixe de conferir.
Spritebox - Crie CSS a partir de imagens Sprite
Este segue uma rota diferente, um pouco menos automatizada. Em vez de criar uma imagem de sprite para você, ele permite fazer upload de seu sprite já criado e definir áreas específicas para gerar o CSS resultante. Uma ótima ferramenta, se você preferir criar sprites no Photoshop e apenas quiser ajuda com o código.
Tela: Gerador de CSS Sprites
Se você estiver carregando imagens para esta, precisará fazer uma de cada vez, o que é um pouco trabalhoso. Se você tiver links, basta colar em uma lista com os nomes das classes correspondentes e pronto. As opções incluem preenchimento e cores de fundo. Funcionou bem nos meus testes, definitivamente vale a pena dar uma olhada.
Stitches - Um gerador de folhas de sprite HTML5
Este permite que você arraste imagens, o que é incrível depois de usar todos os descarregadores desajeitados que outros desenvolvedores criaram. Depois disso, você pode simplesmente clicar em um botão para obter a imagem e outro para pegar o CSS. Praticamente não há opções e funciona apenas no Chrome e Firefox, mas é perfeito se você quer apenas uma solução rápida e simples.
Spritemapper
Este é apenas para super nerds, é um gerador de sprites para download que você executa a partir da linha de comando. A implementação é realmente lisa, basta apontar para o arquivo CSS existente e ele faz o resto do trabalho. Isso torna o problema do gerenciamento de sprites a longo prazo muito fácil, pois você pode simplesmente se apegar aos arquivos de imagem e css originais e processá-los novamente quando houver uma alteração.
SpriteMe
SpriteMe é uma ferramenta incrível que permite que você mantenha completamente seu processo de desenvolvimento típico. Basta criar sua página como faria normalmente usando imagens individuais. Depois que terminar, abra a página em um navegador e clique no bookmarklet SpriteMe. Isso captura todas as imagens da página, cria um sprite e gera o CSS. Isso é especialmente útil se você estiver convertendo um site existente.
Spritefy
O Spritefy é outra opção que permite arrastar vários arquivos para o navegador para processá-los. Como no Stitches, realmente não existem opções, mas é definitivamente uma maneira super rápida de começar a usar sprites (apenas Chrome e Firefox).
CSS Sprite Generator
Este possui algumas etapas desnecessárias no processo de geração e configuração, portanto, leva alguns segundos a mais do que a maioria das outras alternativas, mas possui uma tonelada de saída de código, incluindo CSS e HTML, além de vários trechos para adicionar cada imagem ao div ou span, inserção de links etc.
SpriteMeister - Gerador automático de CSS Sprite
O SpriteMeister é muito parecido com o SpriteMe acima, apenas menos automatizado. Em vez de usar um bookmarklet, você carrega manualmente cada imagem e seu arquivo CSS atual e recebe um download com código atualizado e uma única imagem.
Sprite Creator 2.0
Este funciona exatamente como o Spritebox acima. Você carrega a imagem do sprite que você criou em outro lugar e usa um processo de seleção simples para gerar automaticamente o CSS apropriado para cada imagem.
Adoro? Compartilhe!
Se você gostou da coleção de brindes desta semana, compartilhe seu amor e envie um link para seus sites favoritos. Aqui está um trecho conveniente para você copiar e colar como quiser!
12 geradores gratuitos de CSS Sprite: http://goo.gl/NhLNR
