Efeito rollover com imagens - CSS


Blz galera, vamos realizar hoje uma tarefa simples, um botão de download para o seu site com efeito de mouse (passar o mouse). Bem, poderíamos muito bem fazer o mesmo efeito no fireworks, porém, o código gerado posteriormente para o comportamento (behavior) seria muito grande, pesando mais o HTML da sua página. Para realizar este efeito, é necessário um mínimo de conhecimento de HTML e CSS. Não conheçe nada sobre eles? Não se preocupe, aqui você pode começar a aprender

O botão de download usado neste tutorial é este:


1 - baixe a imagem e abra-a no fireworks. Em seguida, duplique-a. Alinhe-as perfeitamente, uma abaixo da outra. Se precisar, use o painel align (desmarque a opção "to canvas") e alinhe-as ao centro horizontal (horinzontal center):




2 - clique na primeira imagem, vá no menu "filters > other > convert to alpha". Assim, a imagem ficará preto e branco




3 - Ainda na primeira imagem, diminua a transparência para 27%:




Esta é a idéia. quando o usuário entrar no site, ele verá a imagem inicial, transparente e sem cores...e ao passar o mouse, mostrara a imagem debaixo dela, a colorida. E isso, nós faremos via CSS.



4 - Crie um slice na sua imagem > Selecione as duas imagens simultaneamente, agrupe-as (ctrl + g), botão direito > insert retangular slice:


5 - Salve a nossa imagem (botão direito nela > export selected slice). Crie um pasta na área de trabalho e salve-a dentro da pasta com o nome botão

6 - Abra o dreamweaver e junto com ele, um novo arquivo HTML. Salve a página na pasta criada anteriormente com o nome index.html

Iremos usar CSS interno no código, pra facilitar. Mas, é recomendado sempre utilizar CSS num arquivo externo.

7 - Dentro da tag body, insira o seguinte código:

Criamos então um link com uma identificação (ID=botão), que iremos referenciar agora em css.

8 - Insira o seguinte código dentro da tag head:


Este é o segredo, quando eu passar o mouse (hover), ele irá deslocar o background pra baixo (background-position), revelando assim a segunda imagem. Notem que eu desloquei a imagem em 108px, isso porque as imagens naweb são carregadas de cima pra baixo, então, descendo 108px a partir do topo (background-position:0 108px;), eu revelo a imagem abaixo dela. Caso a nossa imagem fosse de altura 120px, bastaria alterar os valores nos campos heigth e background-position. E ao clicar, o usuário é redirecionado para o meu site, onde tem vários exemplos do rollover com css.

Exemplo funcionado
http://www.lucaspeperaio.com.br/sub_paginas/tutoriais-web/1/index.html

Download dos arquivos utilizados
http://www.lucaspeperaio.com.br/sub_paginas/tutoriais-web/1/botao.rar



Espero que tenham gostado, na próxima eu irei ensinar como fazer um menu vertical com css
qualquer dúvida, acessem o meu site e entrem em contato, ou tbm através do meu blog (lucaspeperaio.com.br/blog). Postem a vontade aqui tbm, se quiserem
Pessoal, até mais