28.5.13

Efeitos

Alguém conhece The Pretty Reckless?


Olá,
É eu sei que eu dei uma sumida. Mas foi como a Lúuh disse: eu estava doente e também estava sem internet.  E confesso que também estava sem inspiração. Sempre ela. Mas não se preocupem que agora estou de volta. 

Hoje só para não ficar em branco trouxe alguns efeitos para vocês. Todos eles são de um antigo blog de html meu. Então para ver os tutos já sabem onde clicar. 


Efeito Cool - Preview

Aperte ctrl+f e digite </b:skin> acima dele cole:
@-webkit-keyframes cool {
0% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);}
12% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);}
25% {transform: rotate(18deg) translate(18px); -webkit-transform: rotate(18deg) translate(18px); -moz-transform: rotate(18deg) translate(18px); -o-transform: rotate(18deg) translate(18px); -ms-transform: rotate(18deg) translate(18px);}
50% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);}
75% {transform: rotate(18deg) translate(18px); -webkit-transform: rotate(18deg) translate(18px); -moz-transform: rotate(18deg) translate(18px); -o-transform: rotate(18deg) translate(18px); -ms-transform: rotate(18deg) translate(18px);}
87% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);}
100% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);}
}
.cool {-webkit-transition: .9s; border-radius: 5px;}
.cool:hover {-webkit-animation: cool .9s alternate ease;
Em um Gadget/JavaScript cole:
<img src="sua imagem" class="cool">




Swing Effect - Preview

Coloca isso antes de </b:skin>
@-webkit-keyframes swing {
0% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);}
25% {transform: rotate(5deg) translate(5px); -webkit-transform: rotate(5deg) translate(5px); -moz-transform: rotate(5deg) translate(5px); -o-transform: rotate(5deg) translate(5px); -ms-transform: rotate(5deg) translate(5px);}
50% {transform: rotate(-5deg) translate(-5px); -webkit-transform: rotate(-5deg) translate(-5px); -moz-transform: rotate(-5deg) translate(-5px); -o-transform: rotate(-5deg) translate(-5px); -ms-transform: rotate(-5deg) translate(-5px);}
75% {transform: rotate(5deg) translate(5px); -webkit-transform: rotate(5deg) translate(5px); -moz-transform: rotate(5deg) translate(5px); -o-transform: rotate(5deg) translate(5px); -ms-transform: rotate(5deg) translate(5px);}
100% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);}
.swing {-webkit-transition: .9s; border-radius: 5px;}
.swing:hover {-webkit-animation: swing .9s alternate ease;
}

E em um Gadget/javascript cole:

<img src="sua imagem" class="swing">


Zoom Scale - Preview 
(esse tudo é do KW)

Procure por: ]]></b:skin> e Acima dele cole:

.elitescale{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-transition: 0s linear;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
background-color: #EE3A8C;
padding: 3px;
}
.elitescale:hover {
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
background-color: #FF82AB;
padding: 3px;
  Em um gadget/javascript cole:

<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA SUA IMAGEM" class="elitescale"/></a>


Para mudar as cores e outras coisas é só ir fuçando. Mas qualquer dúvida só comentar. 

Kisses ^3^

39 comentários:

  1. Ai eu adoro tutoriais,mas eu nunca sei fazer elesx :\ , mas mesmo assim gostei!
    Bjs

    www.mundo-desonhadores.blogspot.com

    Da uma passadinha lá no meu blog se puder :)

    ResponderExcluir
    Respostas
    1. Ai que pena! Acho que vou tentar criar um tutorial de como usar os tutoriais. Assim eu tento ajudar. Mas se têm alguma pergunta, manda ai que eu respondo ;)

      Excluir
  2. A-M-E-I os efeitos não conhecia esses *----*
    favoritei, vou usar no próximo lay c;

    vaonamala0ficial.blogspot.com

    ResponderExcluir
  3. Adorei os efeitos!! Eu conheço The Pretty Reckless kk

    chuvasdioutono.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Meus Deus! Que bom. Estou começando a amar essa banda. Kk

      Excluir
  4. A-M-E-I os efeitos!!!
    seguindo aqui.

    :)
    www.meninaperdida.com

    ResponderExcluir
  5. amei seu blog,muito lindo!
    Seguindo,segue de volta?
    summerscomicsworld.blogspot.com.br

    ResponderExcluir
  6. belo blog, gostii do dele e do post XD
    kissus
    ncnosekai.blogspot.com

    ResponderExcluir
    Respostas
    1. Aun! Sou só uma postadora mas obrigada pelo elogio. Bjs

      Excluir
  7. Awnt que Blog mais lindooo meu deus! amei >.<
    Gostei dos efeitos, muito fofos! (Principalmente o efeito cool!)eu não conhecia esses.
    ps: adorei aqui e já tô seguindo, venha conhecer o meu e se curtir, não esqueça de fazer parte, ta? ficarei feliz d+!
    espero que goste, beijos flor. Espero você!
    ➥ pareinosquinze.blogspot.com
    ➥ facebook.com/BlogPareiNosQuinze

    ResponderExcluir
  8. - Poxa, ainda bem que você se recuperou né.
    Uau! amei os efeitos, principalmente o segundo que é bem parecido com o primeiro mais é mais fofo ;)

    Adolescente Nerd // Novo Layout

    ResponderExcluir
  9. Da uma olhada:
    http://x-celebridades.blogspot.com.br/2013/06/desculpa.html

    ResponderExcluir
  10. Oi amor vc vai participar do concurso se vai da uma olhada pq é importante e tem prêmios:
    http://x-celebridades.blogspot.com.br/2013/06/ja-to-me-surpreendendo.html
    Bjks Me avisa nos comentários se vai ou não!

    ResponderExcluir
  11. Anônimo6/6/13 07:16

    Este comentário foi removido pelo autor.

    ResponderExcluir
  12. Adorei os efeitos.
    Beijos, Lili
    Princesa Teen / Layout novo e novidades.
    Receitinha! / Assista! Se inscreve e divulga!

    ResponderExcluir
  13. Vou usar, no proximo lay ><
    - Você está participando do mini-game, basta votar, na barra lateral bem no topo ! Kisses s2
    http://frases-quesejainfinito.blogspot.com.br/

    ResponderExcluir
  14. adorei adorei adorei!!
    aceita parceria\afiliados?? responda nos meus comentários <3
    http://euamotutoriais.blogspot.com.br/ amo o blog acompanho ele demais <3
    Seguindo

    ResponderExcluir
  15. Adorei os efeitos, perfeitos!!!
    teen-girl-fashion.blogspot.com

    ResponderExcluir
  16. Oi linda,gosto muito da banda de rock
    The Pretty Reckless.Minha música preferida
    é Make Me Wanna Die,mudando de assunto adorei
    o post :)

    ResponderExcluir
  17. Que efeitos lindos! Adorei seu blog, realmente muito incrível, tem tudo para fazer o maior sucesso; Já estou seguindo, segue o meu também?
    www.espacegirl.com

    ResponderExcluir
  18. que blog lindo ameiii d+++ da conta !
    veja>> http://seututorialmeututorial.blogspot.com.br/

    ResponderExcluir
  19. Ótimos efeitos ^^
    Beijos~

    www.black-cherry.net

    ResponderExcluir
  20. Oi flor!! Tem um selinho pra você lá no blog!!! Beijos

    princesasmaquiada.blogspot.com.br

    ResponderExcluir
  21. Amei o tuto mais no novo HTML não tem .
    vlog--meumundo.blogspot.com

    ResponderExcluir
  22. Adorei o post, criativo e legal. Acabei de conhecer o seu blog e fiquei encantada com tudo ♥
    Lindo mesmo :)
    Beijos
    http://glendalcantara.blogspot.com.br

    ResponderExcluir
  23. adorei os efeitos !
    desculpe a demora de visitar seu blog e tal eu estava sem net , e ficou meio complicado de comentar .

    beijos candyedream.blogspot.com

    ResponderExcluir
  24. Ótimos efeitos ^^
    Beijos~

    www.black-cherry.net

    ResponderExcluir
  25. Efeitos muito lindos.Os tutorias são sempre ótimos.
    Parabéns.

    http://gota-de-inverno.blogspot.com.br/

    ResponderExcluir
  26. Os efeito são tão fofinhos ameii ^^

    http://h-piece.blogspot.com.br/

    ResponderExcluir
  27. é uma pena que eu não tenha conseguido por estes efeitos :C , poderia fazer um tutorial explicando melhor? Obrigada , ah , pode dar uma passadinha: http://bonequinha-fragil.blogspot.com.br/

    ResponderExcluir
  28. Adorei os tutos, quando vc puder posta mais??
    Desculpa por eu está sumida te peço desculpa pq vc é minha afiliada mas prometo que agora nas férias vou deixar o meu blog em dia!!
    Beijinhos tomara que vc me entenda ^3^
    http://thingsteenoficial.blogspot.com.br

    ResponderExcluir
  29. Este comentário foi removido pelo autor.

    ResponderExcluir
  30. Querida amiga ...
    Eu sei da falta que tenho em visitar sua casa tão querida por mim
    nesse mundo infinito onde construímos verdadeiras amizades
    que terei o resto de vida para agradecer .
    O momento não esta sendo muito oportuno mais desejo prosseguir
    com minha amizade que sempre
    reguei de todas as formas ser fiel a todos.
    Hoje com minha casa um pouco mais triste sinto falta do carinho
    daqueles que aos poucos vão esquecendo da luta que tenho travado pela vida,
    Deus sabe da minha luta constante nem preciso falar muito
    pois nesse mundo a gente recebe boas lições que nos feri no fundo da alma.
    Uma dedicação de quase 10 anos hoje me sinto mal diante de tudo
    que restou daquilo que construí muitas vezes com suor e lagrimasem moentos
    de não estar em condiçõesmais continuei lutei para nunca me afastar
    E o pior de tudo é que eu construí com carinho mundo de amor .
    E plantei flores para te dar mas sinto que vão perecer .
    Feliz final de semana beijos no coração carinhos na alma.
    Evanir.

    ResponderExcluir

Heey!
Está pensando em comentar?! Fique à vontade!
✖ - Aceito "Seguindo, segue de volta?'' desde que a pessoa esteja realmente seguindo!
✖ - Não aceito afiliação pelo comments só aqui
✖ - Os comentários de criticas e elogios são bem vindos, desde que seja criticas construtivas!.
✖ - Perguntas, dúvidas e pedidos? Apenas na ask por favor!~
✖ - Aceito tags e selinhos, avise pelos comments ♥
~ Leio Sempre e respondo a todos os comentários!