Dicas

Incrementando seu Site com Efeito Rollover em CSS

Hoje vou falar sobre um efeito básico de CSS, mas muito interessante para incrementar o seu site com links de imagens. Esse efeito chamasse rollover e utiliza apenas uma imagem dividida em duas.

O efeito rollover é aquele que troca uma imagem por outra quando o usuário passa o mouse sobre ela. Quando bem usado, esse recurso pode incrementar uma página ou um site de maneira significativa. É possível chegar a esse resultado apenas com CSS (Cascading Style Sheets).

Logo a seguir vocês entenderão melhor.

Criando o efeito rollover

A vantagem de utilizar o efeito rollover é que essa técnica dispensa o uso do preload, ou seja, a imagem que aparecerá quando o usuário disparar o evento não precisa ser carregado previamente para que o efeito funcione da maneira desejada. Essa técnica foi utilizada no banner do twitter do Criador Sites.

Veja o exemplo abaixo

@criadorsites

Passo a passo

1º passo: crie sua imagem

Ao invés de duas imagens, você tem apenas uma, contendo a imagem nos seus dois estados, que terá a posição alterada quando o usuário disparar o evento.

Usando o editor de imagens de sua preferência, crie sua imagem como na figura abaixo: Na metade superior, a imagem como aparecerá no site. Na metade inferior, a imagem que aparecerá quando acontecer o efeito rollover.

Exemplo de imagem para efeito rollover

2º passo: crie seu arquivo HTML

Vamos criar o arquivo HTML:

<html>
<head>
<title>Efeito rollover com CSS</title>
<link href="rollover.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p><a href="http://twitter.com/criadorsites" title="@criadorsites" target="_blank" id="efeito">@criadorsites</a></p>
</body>
</html>

Perceba que não usamos a tag <img> para exibir nossa imagem, e sim um link. Isso é importante, pois dessa maneira, garantimos que mesmo o usuário com as imagens ou o CSS desabilitado em seu navegador vai conseguir acessar o link sem problemas.

3º passo: crie seu arquivo CSS

Com o CSS vamos transformar o link em uma imagem:

<!--
#efeito{
width: 250px; height: 250px;
overflow: hidden;
background: url(twitter.gif) top left no-repeat;
display: block;
text-indent: 10000px;
}
#efeito:hover{
background-position: bottom left;
}
-->

Explicando

O atributo width: 250px; define a largura da imagem. Lembre-se de que no primeiro passo definimos os dois estados da imagem no mesmo arquivo, por isso, atribuiremos à imagem apenas metade da sua altura (neste exemplo, 250 pixels: height: 250px;), já que a parte de baixo “trocará de lugar” com a parte de cima no momento que o efeito rollover ocorrer. Isso deixa claro que é importante medir com precisão o tamanho de sua imagem para dividi-la exatamente ao meio, do contrário, o efeito pode ter falhas. Por sua vez, o atributo overflow: hidden; define que o link terá exatamente o tamanho definido, e que qualquer “sobra” da imagem será cortada.

No entanto, o truque está mesmo no atributo background:. Repare na seguinte linha:

background: url(twitter.gif) top left no-repeat;

No url(twitter.gif) você deve colocar a url completa de onde a imagem está salva. Ela define a imagem de fundo e o posicionamento dela: alinhada pelo topo, à esquerda e sem repetição.

O atributo display: block;, que vem logo abaixo, transforma nosso link em um “bloco”, e o text-indent: 10000px; esconde o texto do link.

Por fim, o atributo

background-position: bottom left;

Define que, ao passar o mouse sobre a imagem, ela se alinhará pela base e à esquerda, exibindo assim a metade de baixo do arquivo.

Depois de criado o código, salve o arquivo CSS (ou implemente na própria página HTML, se desejar). Neste exemplo, o arquivo recebeu o nome de rollover.css. Repare que, no código HTML do 2º passo, esse arquivo é “chamado” na quarta linha.

Finalizando

Com um pouco de prática, você pode aplicar a mesma idéia em vários elementos de uma mesma página. Com o mesmo código e um pouco de imaginação, também é possível usar esse efeito em menus, botões de formulário e praticamente quaisquer outros elementos da sua página HTML.

Agradeço a Erika Sarti pela inspiração do post.