03:55
26 de janeiro de 2012
Postado por: Hudson
Muitos sites utilizam métodos para personalizar o banner dos parceiros, opacidade, bordas e etc.
Neste tutorial vou ensinar vários métodos.

A folha de estilos CSS será colocada acima da tag:
]]></b:skin>

Criaremos uma div com o id parceiros e a folha de estilos CSS que conterá os dados da div.

A Div será:

<div id="parceiros"><a href="LINKDOSITE"><img src="LINK_DO_BANNER" /></a></div>

Opacidade
É o mais usado nos sites, deixando o banner opaco, desse jeito:



Assim nosso código CSS fica desse jeito:

#parceiros img{opacity: .3;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
background:#fff;
}
#parceiros img:hover{opacity:5.0;
filter:alpha(opacity=500);
-moz-opacity: 5.0;
-khtml-opacity: 5.0;


Aí talvez você queira colocar uma borda, pra ficar desse jeito:



Você notou que acima a borda comum é preta e a borda hover é vermelha.

Nosso CSS ficará assim:

#parceiros img{opacity: .3;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
background:#fff;
border: 1px solid #000000;
}
#parceiros img:hover{opacity:5.0;
filter:alpha(opacity=500);
-moz-opacity: 5.0;
-khtml-opacity: 5.0;
border: 1px; solid #990000;


Mas para você que acha que borda não tá com nada, que tal colocar uma sombra?
Para ficar desse jeito:



Percebe-se que quando passa o mouse no banner acima, temos uma sombra.

Então nosso CSS com a sombra fica assim:

#parceiros img{opacity: .3;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
background:#fff;
}
#parceiros img:hover{opacity:5.0;
filter:alpha(opacity=500);
-moz-opacity: 5.0;
-khtml-opacity: 5.0;
box-shadow:0px 0px 8px 0px #000;
-moz-box-shadow:0px 0px 8px 0px #000;
-webkit-box-shadow:0px 0px 8px 0px #000;


Pronto, agora você ja pode editar ao seu gosto, com suas cores.
1 comentários:
Anônimo disse...

Vlw Kyo, isso me ajudou mto msm