Tutorial: Rollover de imagens com CSS

[pisicohtico]

Fazendo rollover de imagens utilizando CSS - Por Pisicohtico

Muita gente já sabe do que se trata este tutorial, porém vou ensinar a forma mais simples e leve para obter este efeito que é muito visto na maioria das vezes em botões de muitos sites por aí. Lembrando que esse tuto requer uma certa experiência em CSS.

Primeiramente, porque utilizar o CSS?

Sabemos que algumas linguagens dão suporte a este tipo de efeito, porém o que poucos sabem é que a maioria deles sujam bastante o código e alguns navegadores podem não dar suporte.

A vantagem do CSS está não só na compatibilidade com a maioria dos navegadores, mais também na velocidade que ganhamos no carregamento da página, pois o efeito será carregado juntamente com os demais estilos de sua página, forá o fato que pode ser salvo em um arquivo à parte (*.css).

Vamos ao que interessa

Neste exemplo iremos criar um botão para usar no meu de um site qualquer. Eis a imagem que utilizaremos:

botao.gif (100x40)

Repare que iremos utilizar o bottão e o efeito em uma mesma imagem, assim há efeito instantâneo quando o visitante passar o mouse no botão. Também podem ser usadas duas imagens separadas, porém o efeito seria carregado apenas na hora em que o botão for acionado.

O código a ser usado é o seguinte:

.botao {
float: left;
display: block;
width: 100px;
height: 20px;
background: url(botao.gif) no-repeat top left;
text-indent: -1000px;
overflow:hidden;
}

Utilizamos somente a metade da altura da imagem e mandamos mostrar a parte de cima do background, pois queremos exibir apenas um botão.

Agora o Rollover, basta mostrar o parte de baixo do fundo:

.botao:hover {
background: url(botao.gif) no-repeat bottom left;
}

Feito isso, salve seu arquivo css.

Agora, existem diversas maneiras de colocar o nosso botão no site. Muitas pessoas usam a tag <span>, mais eu prefiro colocar tudo no <a href=....> até mesmo para manter o código limpo e deixar as coisas mais simples.

[url="tutorial.html"]Tutorial CSS[/url]

Dúvidas é so postar aí.

Aproveitem e até a próxima!

[bermonruf]

Repare que iremos utilizar o bottão e o efeito em uma mesma imagem, assim há efeito instantâneo quando o visitante passar o mouse no botão. Também podem ser usadas duas imagens separadas, porém o efeito seria carregado apenas na hora em que o botão for acionado.

Putz! Super criativo! Sempre usei 2 imagens ou mais para rollover, hehe, muito boa ideia, genial :palmas:

Agora, existem diversas maneiras de colocar o nosso botão no site. Muitas pessoas usam a tag <span>, mais eu prefiro colocar tudo no <a href=....> até mesmo para manter o código limpo e deixar as coisas mais simples.

É preferível (infelizmente) colocar o botão no <a> pois o IE (Que novidade hein? Isso daí não é nem browser é uma m###) só aceita a pseudo-classe :hover em links mesmo. Muito chato, pois não ficaria tão semântico quanto <button> já que é um botão...

Flwss

[pisicohtico]

Putz! Super criativo! Sempre usei 2 imagens ou mais para rollover, hehe, muito boa ideia, genial :palmas:

É preferível (infelizmente) colocar o botão no <a> pois o IE (Que novidade hein? Isso daí não é nem browser é uma m###) só aceita a pseudo-classe :hover em links mesmo. Muito chato, pois não ficaria tão semântico quanto <button> já que é um botão...

Flwss

Valeu cara, mais vale ressaltar que a ideia não foi minha, eu so fiz pegar todo o conhecimento que obtive lendo pra caramba e joguei a melhor forma de fazer isso com melhor eficiencia e sem muita complicação.

Nota cultural: Saben usar o CSS você pode fazer quase tudo que envolva estilo de uma pagina, desde editar um feed no seu site até mandar aquele banner chato pro espaço (mais isso eu acho que é ilegal ).

Flwss!

[rafael pacini]

Pô legal cara, essa é uma técnica que pode facilitar bastante.

Alias seria bem legal criar um tópico (ou aproveitar este), para colocar essas técnicas para criar botões e menus dínamicos (CSS, Scripts, DHTML), pois exitem inumeras e são de muito uso no dia a dia do desenvolvedor.

Espero que a sugestão seja bem aceita.

Falouu...