0 Compartilhamentos 300 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

Carregando...

Você pode se interessar

Você está aprendendo JavaScript errado
Artigos
5 visualizações
Artigos
5 visualizações

Você está aprendendo JavaScript errado

Carlos L. A. da Silva - 25 de maio de 2020

O que esse desenvolvedor diria para si mesmo mais jovem, quando ainda estava estudando a linguagem.

Promoções de Jogos do Final de Semana (22/05)
Notícias
16 visualizações
Notícias
16 visualizações

Promoções de Jogos do Final de Semana (22/05)

Carlos L. A. da Silva - 22 de maio de 2020

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

Tech Summit ON – Grupo Movile acontece entre os dia 25 e 29
Notícias
14 visualizações
Notícias
14 visualizações

Tech Summit ON – Grupo Movile acontece entre os dia 25 e 29

Redação - 21 de maio de 2020

Evento, que terá duração de 5 dias, vai compartilhar cases e desafios dos times de tecnologia, além de palestras de mercado com executivos do Grupo

Deixe um Comentário

Your email address will not be published.

Mais publicações

A origem do Zoom
Artigos
15 visualizações
15 visualizações

A origem do Zoom

Carlos L. A. da Silva - 19 de maio de 2020
Promoções de Jogos do Final de Semana (15/05)
Notícias
26 visualizações
26 visualizações

Promoções de Jogos do Final de Semana (15/05)

Carlos L. A. da Silva - 15 de maio de 2020
Como apagar a pasta Removable Storage Devices da Área de Trabalho
Dicas
17 visualizações
17 visualizações
Dicas do Google sobre como evitar golpes relacionados à COVID-19
Artigos
25 visualizações
25 visualizações