18/07/2013

Tutorial: Efeito Sunday

||

Yo babys! Como estão? Nossa quantos comentários vocês fizeram estou louca para moderar porem ainda estou em viajem bubu... Falta apenas duas duas provas para mim voltar pra casa wheeeee!!! Mas hoje venho postar um efeito bem legal, simples mas legal. Por alguma razão gosto de coisas simples sem muita coisa chamativa acho tão fofo. O efeito se chama Sunday hihi achei engraçadinho, mas vou parar de amolar vocês e vamos ao tutorial ne? Para quem quiser dar uma olhadinha no efeito só clicar aqui: Preview


 1. Vá ate seu HTML e procure por ]]></b:skin>, acima dele cole:
    @-webkit-keyframes nen {
    0% {-webkit-transform:  rotate(1deg);}
    25% {-webkit-transform:  rotate(10deg);}
    50% {-webkit-transform:  rotate(1deg);}
    100% {-webkit-transform:  rotate(10deg);}
    }
    @-moz-keyframes nen {
    0% {-webkit-transform:  rotate(1deg);}
    25% {-webkit-transform:  rotate(10deg);}
    50% {-webkit-transform:  rotate(1deg);}
    100% {-webkit-transform:  rotate(10deg);}
    }
    @-o-keyframes nen {
    0% {-webkit-transform:  rotate(1deg);}
    25% {-webkit-transform:  rotate(10deg);}
    50% {-webkit-transform:  rotate(1deg);}
    100% {-webkit-transform:  rotate(10deg);}
    }
    .nen { -webkit-transition: .2s; -webkit-border-radius: 1px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius: 1px; -moz-border-radius-bottomright: 10px; border-radius: 1px; border-bottom-right-radius: 10px;
    box-shadow: 0px 1px #d15e93;}
    .nen:hover { -webkit-animation: nen .2s alternate infinite linear; -webkit-border-radius: 1px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius: 1px; -moz-border-radius-bottomright: 5px; border-radius: 1px; border-bottom-right-radius: 5px; }


2. Vá ate seu layout e crie um novo gadget de HTML. Dentro dele cole o código abaixo e arrume as parte em negrito:

<center><a href="LINK" title="Vaga"><img class="nen" src="http://i.imm.io/1aq9R.png" /></a>
<a href="LINK" title="Vaga"><img class="nen" src="http://i.imm.io/1aq9R.png" /></a>
<a href="LINK" title="Vaga"><img class="nen" src="http://i.imm.io/1aq9R.png" /></a></center>

Prontinho!!!! Espero que tenham gostado os créditos são do blog WOT ate aproxima pessoal beijokas.

6 comentários: