11 setembro 2012

Efeito para Afiliados - Vai e Vem

 Tumblr_m1ohgjtzf61r2bnpho1_500_large
Oi galera hoje eu vim postar um efeito bem legal para vocês usarem no seus afiliados, ele é um vai e vem, que vocês podem visualizar ele neste link aqui, no gadget afiliados.

Para usar ele você tem que seguir os passos abaixo.

Primeiro você tem que procurar por ]]></b:skin>
Depois que achar essa tag, cole acima de ]]></b:skin> o código que está ai embaix, que você só vai poder ver se clicar no leia mais :))))


 .blur{
width: 70px;
height: 70px;
overflow: hidden;
border-radius: 45px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFVTUyFZrf2bYgHaMv4Pr5aJMBpFjC0k04-9GaIy1EzIQO1sbWotKAIO1QtsPdY8jZpVdEVl1tpwwptsQHprkGasLYS_hdoJUFGW1rY_lFcFdh5kiiP8wFRFSU5IfjXc-8H1qsOQ2Kc9U/s1600/1720.png);

-webkit-transition-duration: .80s;
display: inline-block;
opacity: 0.5;
}
.blur:hover{
opacity: 1.0;
box-shadow:
inset 0 0 0 0 rgba(0,0,0,0.1),
inset 0 0 0 5px #8f0812,
0 0 6px rgba(0,0,0,0.3);

-moz-transform: scale(-1.0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(-1.0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(-1.0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(-1.0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(-1.0) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}

Você pode editar os códigos que estão em negrito.
Opacity: é a opacidade, se quiser coloque um 0 na frente, Ex: 0.5;
Border-radius: É a borda arredondada, se não quiser apague o código onde está border-radius: 45px;
Width: é a largura da sua imagem.
Height:  é a altura da mesma.
box-shadow: é a cor da sombra (borda), que aparece no hover.

Pronto agora para usar é so você adicionar um gadget com o seguinte código:

<a href="Link" class="blur" title="Nome do Link"></a>

Nenhum comentário:

Postar um comentário

Comente que eu retribuo!