• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

9 de julho de 2013

Efeito 180 graus

hihi (www) - comecei a usar esse site hoje --'
Olá pandas, ah não, confundi, vocês são humanos mesmo '-'

Mais tudo bem com vocês? espero que sim, estou com uma preguiça hoje, só queria dormir, mais o pc é tão tentador >.<' e eu tenho que estudar pra R.P.M [não, não é uma banda ç.ç ] ~> Resolução de Problemas Matemáticos e para mim é só uma coisa ~> cha-ti-sse que me fer-ra na es-co-la '-' e o pior, acho que estou de recuperação nessa matéria, amanhã com certeza farei a recuperação, ninguém merece, todos na minha sala acharam difícil a prova, já tem matemática, pra quê R.P.M? O.o'

Hoje trouxe para vocês um tutorial de como fazer o efeito do 'nerd' lá no banner, não sei se perceberam, mais se você colocar o mouse acima do 'nerd', ele irá girar como no exemplo (www
Achei super fofo, pois ele gira devagar, deixando super kawaii.
Vamos aprender?
Adaptei um pouco os links pois peguei esse tutorial do tumblr (www).

Para começar, clique na setinha, e procure por ]]></b:skin> e cole acima:
.close {border-radius:5px;transition:All 3.0226s ease;
-webkit-transition:All 3.0226s ease;
-moz-transition:All 3.0226s ease;
-o-transition:All 3.0226s ease;
transform: rotate(4deg) scale() skew() translate(10px);
-webkit-transform: rotate(4deg) scale() skew() translate(10px);
-moz-transform: rotate(4deg) scale() skew() translate(10px);
-o-transform: rotate(4deg) scale() skew() translate(10px);
-ms-transform: rotate(4deg) scale() skew() translate(10px);}
.close:hover {transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);}

E para terminar, é só colar em um HTML // Javascript:
<img src="Imagem" class="close" />
Espero que tenham gostado, se algo não der certo, perguntem pelos comentários ^^'
Agora irei atualizar o chocomapa :3

12 comentários:

  1. Nossa, adorei o efeito :3 Já tinha visto ele no 'Nerd' do blog e fica muito fofo!
    Beijos
    http://www.blog-purplestar.blogspot.com.br/

    ResponderExcluir
  2. Que lindo o efeito, ótimo tutorial.
    Meu blog é novo, podes passar lá qualquer hora?
    alternativeyeah.blogspot.com
    Beijo!

    ResponderExcluir
  3. *O* que daora *O*

    sorrisomet4lico.blogspot

    ResponderExcluir
  4. adorei o efeito, vou colocar no meu lay logo logo ;3

    fatosdapequena.blogspot.com

    ResponderExcluir
  5. Que efeito lindo *o* Irei usar no próximo lay, salvei nos favoritos ♥
    Kissus,
    Konata from Turquoise Diamonds

    ResponderExcluir
  6. Irado, que massa, eu fiquei brincando com o exemplo haha
    Talvez eu use esse efeito no meu lay!
    http://zombieesvg.blogspot.com.br/**

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

    ResponderExcluir
  8. quee top o/
    Eem so vindo akie pra avisar que o Adormecida com insonia voltou , com novas ADMs , eé otimo saber que ainda somos afiliadas *-*
    se o comentario foi mandado duas vezes me desculpa deu erro kkkk'
    ~ Penny

    http://blog-adormecida-com-insonia.blogspot.com.br/

    ResponderExcluir
  9. Fiquei fazendo o efeito rodar toda hora no exemplo,é divertido ¨_¨
    Eu postei ele, mas relaxa que está creditado a você
    http://anainstant.blogspot.com/

    ResponderExcluir
  10. Adorei o efeito :3
    cr4zy-world.blogspot.com

    ResponderExcluir