Armazém do Blog

Olá! Neste artigo indico alguns geradores online de sprites com seus devidos códigos gerados. Mas o que são sprites afinal? São várias imagens agrupadas numa só. Não sei se meu pequeno resumo elucidou alguma coisa ou piorou a situação.. Esse recurso cada vez mais utilizado e que em pouco tempo se tornará padrão, já faz parte de muitos sites. Imagine que você possui um site com várias imagens, tipo botões, ícones de redes sociais, entre outras e cada uma delas tem uma chamada específica para encontrar a imagens em seu diretório. Pois bem, a técnica de sprite consiste em mesclar todas essas imagens numa só. Tá, mas isso não dá confusão? Como o “sistema” vai saber qual imagem carregar? A resposta é simples. É feito um “mapeamento” de posições e os valores dessas áreas mapeadas são então inseridos através da propriedade CSS chamada background-position. Para quem já sabia disso e foi direto para os “geradores” abaixo, beleza! Para quem ainda tem dúvidas, consulte o “Maujor”, que é o cara que sabe CSS.

Em alguns dias estarei postando aqui um pequeno vídeo sobre como utilizar tal recurso. A minha idéia é inserir ícones de redes sociais no topo do meu blog de “testes”. Como vantagens imediatas, posso citar que a junção de várias imagens numa só cria um arquivo menor (ou maior, dependendo de quais recursos você pode agregar. Num dos links abaixo, há a possibilidade de criar uma cópia da imagem que será utilizada como efeito para quando o mouse passar por cima), a página leva menos tempo para carregar, além de poder dizer adeus a um plugins que consome recursos para mostrar suas “redes sociais”.

Por fim cabe acrescentar que nos links que testei abaixo, antes de efetivamente postar aqui, tive que esvaziar o cache do navegador, pois quando quis criar algo diferente, ele acrescentava as imagens anteriores (talvez algo passageiro aqui no filhote!). Se acontecer o mesmo pra você, faça o mesmo. Limpe o cache do navegador ou feche e execute um ccleaner, por exemplo.

O exemplo que criei está abaixo, utilizando o gerador 02, que possui recursos a mais (onde criei uma cópia “sephia”), além de facilitar a visualização dos códigos. Os ícones são da Dryicons e que provavelmente utilizarei no vídeo!

Antes que me perguntem. OK, mas por que você mesmo não implementa isso no seu blog? É que estou trabalhando em outro layout para substituir o atual.

Gerador 01

Gerador 02

Gerador 03

Gerador 04

Gerador 05