Menu com imagens – CSS Sprites

Essa técnica é interessante pois carrega cada imagem do link de uma vez.
A imgem estática e a “hover” estão no mesmo arquivo, uma embaixo da outro. Com um tamanho fixo podemos saber onde termina uma e o começa a outra.
Exemplo:
#men li a:hover { background-position: 0px -39px}

imagem original:

Segue o código do menu:

<div id="menu">
<ul>
<li><a href="http://www.google.com.br/" id="navi1">Google</a></li>
<li><a href="http://www.yahoo.com.br/" id="navi1">Yahoo</a></li>
</ul>
</div>

Agora o CSS com explicação:

/* Menu */
#menu ul {
/*Retira a bolinha da lista*/
list-style-type: none;
}

#menu li {
/* Evita a repetição da imagem*/
background-repeat: no-repeat;
}

#menu li a {
/*Altura e largura do primeira parte da imagem*/
height: 39px;
width: 179px;
/*Estende o link para o tamanho do li*/
display: block;
/*Retira o sublinhado do link*/
text-decoration: none;
/* Aqui tem um truque, joga o texto do link para 2000 pixels a esquerda, fora da visualização. Valeu pela dica Vinicius.*/
text-indent: -2000;
}

#menu li a#navi1 {
/*Coloca a imagem no de fundo no link. CAla link deve ter uma “NaviX” para variar a imagem*/
background-image: url(img/button.jpg);
}

#menu li a:hover {
/*Está ai a mágica do efeito. Muda a posição da imagem de fundo do link para 144 pixels a cima , novamente fora do elemento(exatamente a altura da primeira parte)*/
background-position: 0px -39px;
}

Esse efeito é interessante porque mesmo sem o CSS o menu continua funcional.

3 comentários sobre “Menu com imagens – CSS Sprites

  1. Realmente Gui, “sprites” é uma técnica antiga usada em jogos, onde cada posição de um personagem era parte da mesma imagem. Para fazer um persona andar era só trocar o índice da imagem.O interessante é que o “sprites” mostra que não é necessário apresentar toda a imagem de uma vez.Os comandos-chave desse código são text-ident e background-position negativos, um joga o texto para fora da área de visualização e o outro move a área visível de uma imagem. É um truque antigo dos jogos 2D que nos serve como uma luva.

  2. Eu ia falar justamente o que o gui falou no alistapart tem um tuto bem grande sobre isso… ja chequei a usar… mas é meio demorado pra botar pra funfar… mas é bem util.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s