Ir ao conteúdo
  • Cadastre-se

Tutorial: Rollover de imagens com CSS


pisicohtico

Posts recomendados

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:

th_botao.gif

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!

Link para o comentário
Compartilhar em outros sites

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 :-BEER

Link para o comentário
Compartilhar em outros sites

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 :-BEER

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 :P).

Flwss! :bandeira:

Link para o comentário
Compartilhar em outros sites

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

:-BEER

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!