Rollover simples com CSS
Neste post vou mostrar como podemos fazer um rollover simples usando apenas CSS.
Iremos usar para este exemplo apenas uma tag a simples.
Primeiro passo: vamos criar nossa imagem que será usada para fazer este efeito, como por exemplo a imagem a seguir.
Note que a primeira parte da imagem será usado como o primeiro estado do rollover, ou seja, quando o mouse não estiver sobre o link. E o segunda será usada quando o mouse estiver sobre o link.
Usamos os dois estados em uma única imagem para deixar a imagem em cache.
Segundo passo: o código do nosso link
Túlio Faria.net Agora vamos ao “pulo do gato”, com CSS:
#botao{
display: block;
width: 150px;
height: 150px;
}Terceiro passo: vamos mostrar o link como um bloco com largura de 150×150px, não mais como um elemento inline, para isso:
#botao{
display: block;
width: 150px;
height: 150px;
}Quarto passo: colocar a imagem de fundo:
#botao{
display: block;
width: 150px;
height: 150px;
background: url(2006_07_27_rollover.jpg);
}Quinto passo: legal, mas o texto ficou em cima do meu botão, tudo bem, vamos tira-lo. Vamos usar uma técnica de image replacement usando text-indent, colocando esse valor absurdo (-1000px) o texto será levado para fora do bloco do link, sumindo da tela. O text-decoration: none, apenas para garantir que não irá aparecer o sublinhado em alguns browsers.
#botao{
display: block;
width: 150px;
height: 150px;
background: url(2006_07_27_rollover.jpg);
text-indent: -1000px;
text-decoration: none;
}Sexto passo: vamos fazer o efeito de quando o mouse passar o mouse sobre o link, onde usaremos a propriedade background-position para deslocar a imagem de fundo 0 px para a direita e 150px para baixo. (inicialmente estes valores são 0 e 0)
#botao:hover{
background-position: 0px 150px;
}Com o background position fazemos com que a área visível seja a segunda parte da imagem como ilustrado abaixo, onde a área visível é a área destacada. (150px para baixo)
Espero que tenham gostado, dúvidas? Comentem. Até a próxima.
