Tutorial - Efeito Decrease


Bem, decidi trazer um efeito que criei esses dias. Sou um tanto "iniciante" nessa coisa de efeitos, confesso, mas faço o que posso e espero que o resultado tenha ficado legal. Antes trazer um exclusivo simples, que repassar um, aos poucos eu melhoro, né? É bem simples, ao passar o mouse a imagem diminui rodando, mas como sou horrível em explicações, tenham uma preview do efeito clicando aqui. Coloque o mouse bem no centro da imagem, para obter uma melhor visualização. Para aplicar é bem simples, vamos ao tutorial?


1.  Vá em Editar HTML, abra a primeira setinha, e procure por ]]></b:skin>. Acima dessa tag, cole:
.efeitodecre{
border: 4px double #dcdcdc;
-webkit-transition: all 1.1s ease;
}
.efeitodecre:hover{
-webkit-animation: cssAnimation 1.6337s 17 ease;
-moz-animation: cssAnimation 1.6337s 17 ease;
-o-animation: cssAnimation 1.6337s 17 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(360deg) scale(0.275) skew(-1deg) translate(-2px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(360deg) scale(0.275) skew(-1deg) translate(-2px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(360deg) scale(0.275) skew(-1deg) translate(-2px); }
}/* Remove Assinar Postagens Atom */
.feed-links {height:0px;display:none;}

Se quiser editar algo, edite apenas o que se encontra dentro de .efeitodecre{ Editanto aí, você pode mudar a cor da borda, e sua espessura.

2. Crie um gadget de HTML/JavaScript, e cole o código abaixo, substituindo sempre o que está em destaque:
<a href="Link do Blog" title="Nome do Blog"><img src="URL da Imagem" class="efeitodecre" /></a>
 Pronto, terminamos o tutorial, espero que tenham gostado.

14 comentários:

  1. Amei o efeito :3
    xoxo <3

    http://ashita-no-icons.blogspot.com.br/

    ResponderExcluir
  2. aaah ameeeeeeei já vou aplicar no meu layout *----*
    vai ficar lindooo ^^
    Beijoos

    vaonamala0ficial.[blogspot.com]

    ResponderExcluir
  3. Efeito sdç, g-zuis, e_e' Adorei, que lindo, Ingrid! Só divando nos efeitos, u_u' Amei mesmo, vou usar no próximo lay, u3u

    ~ Kisses

    - 4 Seconds.

    ResponderExcluir
  4. Amei como sempre, tudo o que é feito pela nossa Ingrid, é lindo né!? ;) http://disclaimer-official.blogspot.pt/

    ResponderExcluir
  5. ahhh que divo Ingrid. Acho que eu sou a única que não sei fazer um efeito ç.ç

    quirky-tree.blogspot.com

    ResponderExcluir
  6. Efeito super mais que perfeito Ingrid ♥

    Beijo-
    Diario-de-uma-pandaruja.blogspot.com.br

    ResponderExcluir
  7. Q efeito super .... Maneiro .
    Ameii depois uai
    http://blog-meninasmalucas.blogspot.com.br/

    ResponderExcluir
  8. Adorei o efeito muito lindo, super criativo. Eu ainda estou vendo se vem alguma ideia de algum efeito para mim fazer ^^
    Já estou seguindo essa divesa aqui, se puder pode retribuir? ou me divulgar ? chata eu né ç.ç

    Beijos | empire-htmll.blogspot.com.br

    ResponderExcluir
  9. Bem legal o efeito!
    Beijos Sweet Girl seguindo segui de volta http://brenda-sweet-girl.blogspot.com.br/

    ResponderExcluir
  10. AAAAAAAH! Que efeito super... Perfeito ç.ç Só a Ingrid mesmo u_U
    Vou usar ele rç

    HTML Detected

    ResponderExcluir
  11. Que Efeito Mega legal !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    AMEI ! o blog !! Amor a Primeira vista rsrsrs

    Seguindo ( obvio ! )

    www.the-sweet-icecream.blogspot.com

    Kissus ~

    ResponderExcluir
  12. UHSAASUA' Querer ir para a escola é desconfiança de 'estou me sentindo mal'? HUSAUASHUAS' *----

    Que efeito divo, cabrita *u* Adorei viu? <3

    Beijos :*

    ResponderExcluir
  13. É iniciante mas é uma otima iniciante.
    Adorei esse efeito.
    Beijos linda.
    Tenha um otimo final de semana,
    cupcakeofchocolate.blogspot.com

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +