25/08/2012

Tutorial - Bordas arredondadas na elite afiliados


Ooi pessoal! Trouxe um tuto que a leitora Bianca Costa pediu, é como o nosso, só que eu fiz com imagens mesmo

Vá em seu HTML e procure por ]]></b:skin> e cole o código acima

.afiliados {
opacity: 0.7;
-webkit-transition: 0.5s;
border-radius:15px;
width: 50px;
height: 50px;
text-align: center;
}
.afiliados:hover {
opacity: 1.0;
}

Entendendo o código

Normal
opacity: 0.7; Opacidade em 70%, no estado normal, sem passar o mouse.
-webkit-transition: 0.5s; Tempo da transição.
border-radius: 15px; Bordas arredondadas.
width: 50px; Largura da imagem dos afiliados.
height: 50px; Altura da imagem dos afiliados.
text-align: center; Alinhamento das imagens.
Hover
opacity: 1.0; Opacidade em 100% (normal), ao passar o mouse.
Salve e vá até Design > Elementos da página > "Adicionar um Gadget" > HTML/Javascript e cole:

<a href="url do blog" title="título do blog"><img src="link da imagem" class="afiliados"/></a> 
E pronto :)




Nenhum comentário:

Postar um comentário