iMasters | Por uma internet mais criativa e dinâmica

• CSS
• Linguagens

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 13 comentários

O que é Sprite?

Antes que façam a piadinha [rs], Sprite não é a marca de refrigerante e sim "um conjunto de dados que definem determinado objeto ou personagem num jogo. Para uma pessoa, por exemplo, podemos ter um sprite que contenha as posições vertical e horizontal dela no mundo, a direção para onde ela está virada e os bitmaps que podem representá-la durante o jogo".

E o CSS Sprite?

CSS Sprite é uma técnica que usa um Sprite para fazer uma "troca de imagem", ou seja, o deslocamento de posição do mapa de imagem que irá fazer no caso a "animação". Essa técnica permite que utilizemos várias imagens em uma só, assim economizamos número de requisições no servidor e quantidade de imagens.

Como desenvolver essa técnica?

Usarei aqui um exemplo de como aplicar CSS Sprite em um menu, onde ao passar o mouse ele trocará a imagem de fundo. Usarei a imagem e somente essa imagem abaixo para desenvolvimento do tutorial.

O menu inicialmente será em preto e branco, conforme abaixo, e ao passar o mouse ele ficará colorido. Veja o exemplo:

Ao passar o mouse sobre (hover), a opção mudará a cor de fundo:

Depois da produção das imagens, vamos ao HTML!

Cada link tem sua ID, ou seja, cada link terá seu fundo individual, por isso utilizo ID ao invés de classe.

<div id="top_menu">
<ul>
	<li><a href="#" id="opt1">Option 1</a></li>
	<li><a href="#" id="opt2">Option 2</a></li>
	<li><a href="#" id="opt3">Option 3</a></li>
	<li><a href="#" id="opt4">Option 4</a></li>
</ul>
</div>

Depois de construído o menu em HTML, iremos estilizá-lo com CSS.

Aqui está o código mais importante do nosso CSS.

#top_menu ul li a{
    background-image:url(bg_sprite.gif);
    background-repeat:no-repeat;
    background-position:right;
    (...)
}   
#top_menu ul li a:hover#opt1{ background-position:-3px 6px; }
#top_menu ul li a:hover#opt2{ background-position:-110px 6px; }
#top_menu ul li a:hover#opt3{ background-position:-217px 6px; }
#top_menu ul li a:hover#opt4{ background-position:-320px 6px; }

Explicando:

#top_menu ul li a: Ele carrega a imagem bg_sprite.gif como fundo (background) uma única vez, não repetindo a imagem e posicionando a direita, local onde está a cor de fundo do nosso menu, como está na imagem menu pronto.

Agora explicarei somente um estilo, que é equivalente aos posteriores, pois alteramos somente a posição X (horizontal) e Y (vertical) da imagem, dando a sensação que a mesma está sendo trocado.

#top_menu ul li a:hover#opt1: É alterado somente a posição do background ao mover o mouse sobre o link, uma vez que a imagem já está carregada pelo estilo #top_menu ul li a.

O primeiro valor do background é equivalente a posição X (horizontal) e o segundo Y (vertical);

Conclusão:

O CSS Sprite pode ser usado em várias ocasiões, a exemplo de vários ícones na página. Se você tem 10 ícones, você pode produzir somente uma imagem com os 10 ícones e posicioná-las como background a sua necessidade.

Notas:

O exemplo desse artigo está disponível aqui.

O arquivo completo pode ser baixado nesse aqui.

Abraço, e até a próxima!

Todos os artigos de Eder Prado

13 comentários publicados

• 1. Parabens Eder

  Quinta-feira, 26/04/2007, por Éder da Silva
  

  Excelente materia meu amigo,isso ira ajudar muitas pessoas pode ter certeza disso. Valewww

  Responder comentário

• 2. É...

  Quinta-feira, 26/04/2007, por Vinicius Vicente
  

  É, isso é algo a pensar... até que é bom o artigo... valeu pela idéia!

  Responder comentário

• 3. Mui bom

  Quinta-feira, 26/04/2007, por marco moura
  

  Em um artigo do YAHOO sobre performa-se, é dito q diminuir o numero de requisições na página tem um grande impacto na redução do tempo de resposta para o usuário
  
  CSS sprite na veia, nada de pensar, vamos usar já

  Responder comentário

• 4. Show de bola....

  Quinta-feira, 26/04/2007, por Edimar Ramos
  

  show de bola... ficou bacana o resultado

  Responder comentário

• 5. Muito Bom

  Sexta-feira, 27/04/2007, por Rafael Brugnollo
  

  Não conhecia a técnica... obrigado pelo artigo!!! me ensinou muito!

  Responder comentário

• 6. Hun..

  Sexta-feira, 27/04/2007, por Igor Escobar
  

  Legal a idéia desta artigo amigo. Original, parabens ;)

  Responder comentário

• 7. Title / Alt

  Sexta-feira, 27/04/2007, por Davi Lima
  

  Tem como eu colocar ALTs ou TITLEs para cada botão da sprite?

  Responder comentário

• 8. Obrigado pelos comentários

  Sexta-feira, 27/04/2007, por Eder Prado
  

  Davi Lima, respondendo sua pergunta. Não é possível colocar alt e title na imagens, uma vez que elas são carregadas como background.
  
  O que você pode fazer é colocar title na tag <a>, por exemplo, <a title="Imasters" hreh="...
  
  Abraço!

  Responder comentário

• 9. Ótimo

  Sábado, 28/04/2007, por Rafael 001
  

  Realmente é artigos assim que valem a pena ler... Essa técnica não conhecia, apesar de simples não sabia que com o "background-position" podiamos usar -100px; -20px, etc...
  
  Valeuuuuu!!!

  Responder comentário

• 10. Ótima, e intereçante

  Quarta-feira, 02/05/2007, por Neucimar Flávio Vieira
  

  Horra, parabens ótima matéria mesmo.

  Responder comentário

• 11. Não entendi uma coisa.

  Sexta-feira, 04/05/2007, por Gustavo Buarque Costa Cardoso
  

  Porque de uma imagem em preto branco, se somente usa a imagem colorida.

  Responder comentário

• 12. Gustavo Buarque

  Sexta-feira, 04/05/2007, por Eder Prado
  

  Infelizmente não entendi sua pergunta!

  Responder comentário

• 13. Interessante

  Domingo, 23/12/2007, por Rodrigo Luiz Genz
  

  Nossa nunca tive tal pensamento sobre efeito de menus quanto a esse, mas confesso ter me confundido quanto a escolha do artigo para a leitura ^^ pensei que aqui estaria sendo postado sobre os spray.
  Mas terminei satisfeito, pois tal conhecimento não tinha ainda .. vlw continue assim ;D

  Responder comentário

Sobre o autor

Eder Prado é webdesigner na FJPII (Canção Nova), estudante em Licenciatura da Computação na FATEA de Lorena, e tem interesses em programas de educação a distância, coordenação de projetos e padrões de desenvolvimento.

Indique para um amigo

Tags relacionadas

3g apple brasil criação lançamento youtube firefox web mercado php ti tecnologia google windows crescimento desenvolvimento yahoo mobile android internet microsoft twitter linux iphone celular seguranca

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!