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á:
Opacidade
É o mais usado nos sites, deixando o banner opaco, desse jeito:
Assim nosso código CSS fica desse jeito:
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:
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:
Pronto, agora você ja pode editar ao seu gosto, com suas cores.
Neste tutorial vou ensinar vários métodos.
A folha de estilos CSS será colocada acima da tag:
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.
Vlw Kyo, isso me ajudou mto msm