0 Compartilhamentos 208 Views

Gerador de Sprites CSS

Esta ferramenta online permite automatizar o processo de criação de Sprites CSS. Basta fornecer um arquivo ZIP contendo 2 ou mais imagens (GIF, PNG ou JPG) e ela irá gerar uma imagem sprite e as regras CSS correspondentes para segmentar e exibir cada componente da imagem.

As Sprites CSS são uma forma de reduzir o número de pedidos HTTP feitos pelo seu site ao combinar diversas imagens menores em uma única imagem mais larga e atribuir coordenadas X e Y para cada uma das imagens originais. Após atribuir a imagem gerada como fundo de elementos presentes na página, a propriedade CSS background-position pode ser utilizada para deslocar a área visível necessária para exibir a imagem menor original.

Este recurso é amplamente utilizado em sites de muito tráfego, como o Yahoo,  que precisam ter o menor número possível de requisições ao servidor. Ao invés de solicitar um punhado de imagens pequenas, carrega uma única vez uma imagem que é a soma de todas. Um bom exemplo da técnica pode ser visto abaixo, em um sprite gerado pelo site de comércio eletrônico de jogos GOG.com, onde os principais elementos gráficos fazem parte da mesma imagem:

Sprite do GOG.com

Apesar das vantagens da técnica, criar uma imagem que reúna todos os elementos usados em um layout pode ser bastante trabalhoso. Calcular manualmente a posição X e Y do elemento dentro da figura só aumenta a complexidade da tarefa. Felizmente, o  Gerador de Sprites CSS consegue realizar estas duas coisas em questão de segundos.

Com diversas opções de configuração, a ferramenta online permite especificar a distância entre os elementos, o prefixo e o sufixo das classes CSS, a orientação da imagem gerada (vertical ou horizontal), a cor de fundo da nova imagem (podendo ser inclusive um PNG transparente), além de formatar o código e comprimir o arquivo final. A única limitação da ferramenta é o tamanho do ZIP que ela é capaz de processar: o arquivo que comprime as imagens originais não pode ter mais de 1MB. Mas nada impede que você tenha mais de um sprite em seu projeto: um para o menu principal, outro para elementos de formulário, outro para pequenos detalhes que se repetem etc.

O Gerador de Sprites CSS possui uma boa documentação em diversas línguas (incluindo o Português) e é totalmente gratuito.

Acessar o  Gerador de Sprites CSS

Você pode se interessar

Promoções de Jogos do Final de Semana (20/09)
Notícias
6 visualizações
Notícias
6 visualizações

Promoções de Jogos do Final de Semana (20/09)

Carlos L. A. da Silva - 21 de setembro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Como enlouquecer os rastreadores de internet
Dicas
9 visualizações
Dicas
9 visualizações

Como enlouquecer os rastreadores de internet

Carlos L. A. da Silva - 18 de setembro de 2019

Track This é um experimento criado pelo time do Firefox que vai alterar completamente o perfil que os anunciantes tem de você.

A história de Amazônia, o primeiro jogo brasileiro!
Artigos
9 visualizações
Artigos
9 visualizações

A história de Amazônia, o primeiro jogo brasileiro!

Carlos L. A. da Silva - 17 de setembro de 2019

Como um programador iniciante criou um adventure clássico que atravessou décadas.

Mais publicações

VIM (Amado ou Odiado?) // Dicionário do Programador
Vídeos
6 visualizações
6 visualizações

VIM (Amado ou Odiado?) // Dicionário do Programador

Thais Cardoso de Mello - 16 de setembro de 2019
Promoções de Jogos do Final de Semana (13/09)
Notícias
10 visualizações
10 visualizações

Promoções de Jogos do Final de Semana (13/09)

Carlos L. A. da Silva - 13 de setembro de 2019
Como usar os novos atributos de link do Google
Dicas
11 visualizações
11 visualizações

Como usar os novos atributos de link do Google

Carlos L. A. da Silva - 11 de setembro de 2019