Espero que perdoem o pequeno deslize no seletor body que coloquei como background(que burro dá zero pra ele!!).

[UPDATE]
Links para baixar o video e os fontes.
[/UPDATE]

Para aqueles que não conseguirem ver pelo youtube ou acharem a resolução muito baixa podem fazer o download do Vídeo-Tutorial.

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“!

1
2
3
4
5
6

<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

*{
    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.