Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

19 maio 2009

Efeito hover no cabeçalho, post e sidebar

efeito hover com css

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 :hover apenas para links, o que não é o caso deste tutorial.
Aliás, li por aí que o IE6 não suporta a Internet e 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), coloque-a em um post do Blogger (depois salve como rascunho), copie o link da imagem clicando na aba Editar HTML (no editor de postagens) 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 #212121 representa a cor que se estende por toda a página, repeat-x faz com que a imagem se repita indefinidamente na horizontal e 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', hospede como a anterior, copie o link e coloque neste trecho, como se apresenta:

#header-wrapper {
width:660px;
height:170px;
margin:0 auto 10px;
background: url(url da imagem aqui) 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:170px; 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(url 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(url da imagem) 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 10px;
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(url da imagem) no-repeat top left;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.

Artigos Relacionados

21 comentários:

Anônimo disse...

Ariane:
Gostei muito do que você escreveu sobre o IE6.
Não sei porque as pessoas insitem nesta tralha. Está na hora de fazer uma campanha contra.
Valeu mesmo.
Obrigada.
Anny.

Anônimo disse...

=D Nada melhor que um hover para deixar o leitor ligado no link... =D
-
Esse post deve ter dado um trabalho... hehhehe
Vida dura essa de metablog....

Anônimo disse...

Ariane eu concordo com você à respeito do IE6.
Nós que somos programadores e desenvolvedores de web é que sofremos e muito com isso. O IE6 não suporta o efeito hover, as fotos em .png e vários scripts ficam comprometidos neste navegador. Eu também concordo que o IE6 não suporta a internet. Mas afinal, como iremos convencer o mundo de que o IE é uma porcaria? Estou até pensando em fazer um movimento anti-internetexplorer no meu blog!

Ariane disse...

anny, já existe uma campanha 'Morte ao IE' :)

portalmeira, deu trabalho sim, estou desde ontem preparando.

tecnologianetblog, acho que uma maneira de fazer com que as pessoas percebam que existe algo errado é justamente parando de se preocupar em fazer com que um blog ou site fique bom no IE6 e não ficar tanto tempo 'maquiando' a situação :)

Anônimo disse...

Concordo plenamente com seu ultimo comentário Ariane, pois eu passava dias horas ou dias tentando ver uma maneira de deixar meu site perfeito no IE6, mas desde então me concientizei e deixei de lado o IE6 pois as pessoas deveria buscar melhorias para seu computadores, moderniza-los e acompanhar a evolução da internet.

Atenciosamente,
Felipe Florindo.

Anônimo disse...

esse efeito no titulo da minha sidebar nao esta funcionando :(

Ariane disse...

Felipe exatamente. Não acho justo perder tempo precioso com algo que já está tão ultrapassado.

anime_H não encontrei o código no seu template, não está lá.

Joao Sousa disse...

Concordo com a campanha Morte ao IE

Nao aguento mais oa bugs e palas do meu ie7.

firefox Forever ;*

f disse...

Ola pessoal!!!
alguem sabe pq no internet explorer os meus posts fica com um espaço sem nada na parte de cima???????????
No firefox naum fica nenhum espaço e no ie fica um espaço ridiculo!!!
Se alguem saber o pq e poder me ajudar Obrigado!!!!!

Cristine disse...

Hola!!

Aii,não consigo modificar o cabeçalho,para que a imagem preencha todo ele.
Muito bom teu blog!

besos,
Cristine

Professor Rogério Souza disse...

Ariane, o link para o blog de testes onde eu poderia ver o efeito não está funcionando.

NOVO CAMBURY HOTEL disse...

Thank you so very much, awesome!

João Bosco De Oliveira disse...

Ariane, passei por aqui tão-somente para agradecer.
Mesmo sem nada saber acerca de HTMLs e afins, consegui dar uma melhorada bacana no Insensatotal. (Coloquei até um agradecimento no rodapé. É rodapé mesmo o nome, né?).
(Com certeza aperrear-lhe-ei mais vezes).
Grande abraço e muito obrigado.

Vini Ribs disse...

Olá Ariane, estou com uma dúvida em como colocar um widget no cabeçalho do blog faz muito tempo que eu tento colocar um relogio no cabeçalho de minha página ou da minha barra lateral olha só meu blog e ve se você consegue:
http://viniribsblog.blogspot.com/

Obrigado.

Mateus Rodrigues disse...

Olá Ariane!!! Estou aqui para avisar que alguns sistemas de emoticons nos comentários só funcionam no IE8, então quem usa sistemas de emoticons nos comments do seu blogger, acho melhor atualizar a versão do seu IE.

Só isso mesmo, que tiha pra dizer, fica aí a dica;
Mateus.

Lua disse...

Ariane, gostaria de saber se vc tem umas dicas de como e onde fazer imagens para cabeçalho porque não sei nada de photoshop.Seu blog esta otimo, parabens!

Mundo dos Colirios disse...

Ariane gostaria de saber de como fasso um Template para o meu blog e um cabeçalho legal o meu blog é esse aqui :
http://mundocolirioo.blogspot.com e como o nome do site diz ele é um blog de Colírios e Divas como a da Capricho e adoraria se vc me ajudassem com isso
obg

OBN2000-EletroInfo disse...

Ariane, seu blog além de prático tem toques bem profissíonais também. Trabalho com a web desde "faz tempo" e, a cada dia que passa, aprendemos mais e mais. Elaborar um layout para o blogspot com suas dicas é bem prático (e rápido). Agradeço, e desejo muita prosperidade, parabéns!

Guilherme disse...

Oi, seu blog ja me salvou várias vezes =]
Mas seguinte... O código ali acima, o primeiro "... e coloque no seguinte trecho do código, como se apresenta em negrito:..." ele deve ser posto aonde ? No HTML do design ? Em qual parte (Se for no HTML) ? E se não é lá, aonde então ? =S

Ariane disse...

Guilherme desculpe se ficou mal explicado: na verdade você deve procurar aquele trecho no código html do seu template e acrescentar o que está em negrito. Isso vale para os outros códigos. Lembrando que este tutorial se refere aos modelos de Layout (2006) e não aos modelos novos do blogger.

Unknown disse...

Ariane, parabéns pelo seu blog! gostei muito dessa iniciativa!!! a linguagem é bem didática!!!!!

Postar um comentário

Os comentários são moderados.