5 de ago de 2013

2

Efeito Bu

Hello my sweets
Para sua elite de autores ou de afiliados, eu trouxe o efeito Bu, que na verdade não tem nada a ver com o efeito, criado por Josh Hofstadter do BC
Preview


Antes de tudo, cole isto no seu CSS:
.efeitobu { margin: 2px; background: #fff; padding: 2px; border: 2px double #dcdcdc; -webkit-transition-duration: .80s;}
.efeitobu:hover {
-webkit-transition-duration: .80s;
-webkit-animation: cssAnimation 1.504s 17 ease;
-moz-animation: cssAnimation 1.504s 17 ease;
-o-animation: cssAnimation 1.504s 17 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(88deg) scale(1.5) skew(3deg) translate(-141px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(88deg) scale(1.5) skew(3deg) translate(-141px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(88deg) scale(1.5) skew(3deg) translate(-141px); }
}
Bom, vamos agora editar isso... Mude o "background: #fff;" pela cor da borda branca (no preview). 
Mude "padding" pela grossura da borda branca.
Por fim, troque "border: 2px double #dcdcdc;" pela grossura e cor da borda dupla 
(borda cinzenta no preview).

Agora ponha isso onde quer colocar o efeito:
<a href="LINK" title="TITULO"><img src="URLDAIMAGEM" class="efeitobu"></a>
 Mude apenas o que está em negrito.
Kissi

2 comentários:

Luana Araújo disse... Best Blogger TipsAnswerBest Blogger Templates

Nossa eu adorei o seu blog

já estou seguindo esse blog ok

http://garotafree.blogspot.com.br/

Bjs Luana

Bia 4Teen disse... Best Blogger TipsAnswerBest Blogger Templates

Que bom que gostou!
Kissi