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.

Enfim, o 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!