CSS Sprite
Antes de alguém fazer confusão com o refrigerante, vamos explicar o que é um sprite em informática.
Um sprite é um objeto gráfico, normalmente uma imagem, que se move numa tela sem deixar rastros, foi muito utilizado nos jogos 2D há um tempo atrás, o pessoal deve estar lembrando do mugen não?
Bom então como isso funciona na web? Todos sabemos que quanto maior o numero de imagens que utilizamos em um site, maior é o número de requisições que um browser deve fazer para exibi-la, certo? Então quando precisamos fazer uma animação, por javascript ou mesmo um simples :hover
, em um site que precise de várias imagens, seria interessante que quando a animação começasse já estivessem todas as imagens carregadas, ou poderia pular alguns quadros alterando o efeito desejado. Isso pode ser feito carregando todas as imagens necessárias dentro de um único arquivo de imagem e quando necessário, mudar a posição da imagem para mostrar somente a parte necessária para o usuário.
Como diria um antigo colega “show me the code“!
<ul> <li><a class="botao" href="#">Botão 1</a></li> <li><a class="botao" href="#">Botão 2</a></li> <li><a class="botao" href="#">Botão 3</a></li> <li><a class="botao" href="#">Botão 4</a></li> </ul>
Nosso HTML é bem simples, apenas uma lista de links que pertencem a class .botao
para ficar mais fácil definir as regras.
Primeiro vamos ver como deve ficar nossa imagem. Se quisermos um botão de 40px
de altura com uma troca a imagem deve ter 80px
de altura e obviamente deve conter dois botões.

Código CSS
*{ list-style:none; font-weight:bold; font-size:14px; text-decoration:none; color:#415FAF; } .botao{ background:url(botao.jpg) no-repeat; width:200px; height:20px; display:block; text-align:center; padding:10px 0; } .botao:hover{ background-position: 0 -40px; }
Como este é apenas um exemplo, comecei utilizando uma regra para definir as propriedades que me interessavam de um modo bem geral.
Como podem ver das linhas 1 à 7, tiramos os marcadores da lista(linha 2), colocamos o texto em negrito(linha 3), definimos a fonte(linha 4), retiramos o sublinhado padrão do link(linha 5) e definimos a cor do texto(linha 6).
A partir da linha 9 é que nos interessa, definimos a imagem como background
na linha 10, e o tamanho do botão nas linhas 11 e 12, como nosso botão é um link, que por padrão tem a propriedade display como inline
, deve ser alterado para block
para respeitar as as medidas que definimos. Nas linhas 14 e 15 utilizamos para centralizar o texto do botão.
Para fazer nossa mágica utilizaremos o a pseudo-classe :hover
, como podemos ver na linha 18, para que quando passarmos o mouse pelo link mudamos o posicionamento do background
, para isso utilizamos a propriedade background-postion
que move o background
no eixo x e y respectivamente.
Segue o link para baixar o exemplo, que também mostra como usar várias imagens ao mesmo tempo.