Efeito hover cabeçalho

Efeito hover no cabeçalho, post e sidebar

Mamanunes perguntava no Twitter dia desses, como dar um efeito hover no cabeçalho da página, utilizando imagens. Para que você possa compreender logo de cara do que trata este tutorial, acesse este link do meu blog de testes e passe o cursor do mouse sobre o cabeçalho, post e títulos da sidebar. Mas adianto que se você insiste em usar o IE6, não verá nada acontecer, isto por que o IE6 suporta a pseudo-class :hoverapenas para links, o que não é o caso deste tutorial.

Aliás, li por aí que o IE6 não suporta a Internete achei a definição excelente. Eu realmente não entendo por que uma pessoa insiste em usar um navegador tão ultrapassado. O navegador é apenas uma ferramenta e quando uma ferramenta se torna antiquada tratamos de substituí-la. Não é por que o IE6 veio instalado em seu computador que você é obrigado a usar. Procure fazer o download de qualquer outro navegador: Internet Explore 7, Internet Explore 8, Firefox, Opera, Chrome...o que for. Eu já não me preocupo em fazer nada parecer bem no IE6 e me parece um contra-senso gritar 'Morte ao IE6' e continuar perdendo horas e horas (e muitas vezes dias) para que este navegador possa interpretar o que naturalmente não compreende. Por que se continuarmos a fazer tudo parecer 'normal' no IE6 como vamos convencer as pessoas a abandoná-lo?

Mas, voltando...
Para dar este efeito no cabeçalho, primeiro vou ensinar como colocar uma imagem no topo que atravesse todo o layout, de ponta a ponta, em qualquer resolução. Crie sua imagem (eu usei esta: http://i44.tinypic.com/21l3os5.jpg), hospede em algum site (eu uso o TinyPic) copie o Direct Link for Layouts fornecido e coloque no seguinte trecho do código, como se apresenta em negrito:

body{
background: #212121 url(aqui o link da sua imagem) repeat-x top left;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
O valor#212121representa a cor que se estende por toda a página,repeat-x faz com que a imagem se repita indefinidamente na horizontale situar com top left garante que ela se repetirá a partir do topo à esquerda. Visualize a modificação e salve.
No exemplo que dou em meu blog de testes, eu retirei o cabeçalho para dar lugar a uma imagem onde se lê Título do Blog. Para retirar o cabeçalho, procure por este trecho (não precisa Expandir Modelo de Widget):

<b:widget id='Header1' locked='true' title='Efeito Hover (Cabeçalho)' type='Header'/>

substitua true por false e salve. Feita esta simples modificação você poderá mover o cabeçalho pela página, para a sidebar por exemplo, ou mesmo excluí-lo da página.
Depois de retirar o cabeçalho da página, crie uma imagem que deve aparecer no topo no estado 'normal' (no caso do meu exemplo, esta imagem:http://i43.tinypic.com/2vkian6.jpg, hospede como a anterior, copie o link e coloque neste trecho, como se apresenta:

#header-wrapper {
width:660px;
height:137px;
margin:0 auto 10px;
background: url(http://i43.tinypic.com/2vkian6.jpg) no-repeat top center;
}

*Observe que a minha imagem para título tem a mesma altura da imagem usada em background e eu estipulei esta altura em height:137px; Para que sua imagem não fique afastada do topo do layout, retire todas as margens e paddings que possam distanciá-las. No caso do template Mínima (que foi usado neste teste), retirei o padding:10px de #Outer-wrapper, coloquei margin: 0px para #header e retirei a navbar.

Agora crie a imagem que deve aparecer no cabeçalho no estado hover (quando passa o cursor sobre ele), hospede, copie o link e acrescente este trecho logo abaixo do anterior:

#header-wrapper:hover{
background: url(link da imagem hover) no-repeat top center;}

perceba que eu posicionei da mesma maneira as duas imagens, no estado normal e hover:no-repeat top center.
É apenas isto. O efeito será interpretado por todos os navegadores, menos o IE6 como já expliquei.
Para dar este efeito no post, fiz o seguinte:

.post {
margin:.5em 0 1.5em;
background: #000a09;
padding:2.0em 0 1.5em;
text-align:justify;
color: #ccc
}

.post:hover{
background: #000a09 url(http://i43.tinypic.com/4skx77.jpg) no-repeat top center;}

Basta acrescentar tudo o que está em negrito. No estado normal eu coloquei uma cor de fundo e no estado hover coloquei a cor mais a imagem que criei (com o fundo de mesma cor) e estipulei que ela não se repita e apareça no topo centralizada.

Para os títulos da sidebar.
No template Mínima não há especificações para o título da sidebar, por isso é preciso primeiro criá-las, desta maneira:

.sidebar h2{
margin: 0px;
padding: 15px 0px 5px;
text-align:center;
width: 260px;
height: 35px;
font-size: 18px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;
border-bottom:1px dotted $bordercolor;}

Todas as especificações descritas podem e devem ser mudadas ao gosto de cada um, estou apenas mostrando o que usei no meu exemplo. Para o estado hover usei:

.sidebar h2:hover{
background: url(http://i39.tinypic.com/2isf4pj.jpg) no-repeat top center;color: #000;}

Observe que neste caso em particular eu não estabeleci nenhum background para os títulos no estado normal, aproveitei apenas a cor da página (que coloquei antes do link da imagem usada em body, lembra?). Neste caso a propriedade background aparece apenas no estado hover.