Tutorial: Efeito retract


Olá radioactives!

Antes de tudo quero dizer que foi eu (nikki) que criei esse efeito para afiliados, então se usarem creditem ao Radioactive Pandas, eu estou postando primeiro aqui, porque hoje não é o dia de eu postar no meu blog e eu queria despachar logo ksksks' o efeito é esse. Pois bem, alguém foi seduzida por esse gatinho da ilustração? Eu o achei tão fofin, ah eu achei super legal o post anterior e eu adoraria deixar minha opinião. No começo, eu era uma pessoa que adorava deixar minha opinião e deixar sempre a mostra minha insatisfação com a blogosfera, eu já fiz milhares de posts sobre originalidade, leitores fantasmas, etc. Mas depois de um tempo, meu blog começou a ganhar seguidores e eu comecei a me afastar desses assuntos, e me foquei somente em html e resources... Sinceramente, hoje eu estou muito infeliz blogando, se vocês vissem o tipo de templates que eu fazia, tipo, eu colocava um png enorme, meus gadgets tomavam quase toda a página, já que eram muitos, mas hoje, tenho 3 no máximo, e fico desgastada até para fazer um png... Sinceramente, não estou nada feliz, mas depois dos comentários que eu li ontem eu vou fazer uma mudança no meu blog, vou postar somente minha opinião, ficarei feliz se as pessoas continuarem a seguir, mas se não... O botão de deixar de seguir é a serventia do blog.
Come on?

Bem, após um desabafo vá em sua caixa de códigos e procure por ]].
Após achar, mas tem que ser o que você pode por os códigos em! Cole o código a seguir:
.retract{WIDTH:40PX; MARGIN:1PX;-WEBKIT-TRANSITION: ALL 1S EASE; -MOZ-TRANSITION: ALL 1S EASE; -O-TRANSITION: ALL 1S EASE; TRANSITION: ALL 1S EASE; CURSOR:POINTER;}
.retract:HOVER{-WEBKIT-TRANSFORM: transform: rotate(29deg) scale(0.813) skew(3deg) translate(2px);
-webkit-transform: rotate(29deg) scale(0.813) skew(3deg) translate(2px);
-moz-transform: rotate(29deg) scale(0.813) skew(3deg) translate(2px);
-o-transform: rotate(29deg) scale(0.813) skew(3deg) translate(2px);
-ms-transform: rotate(29deg) scale(0.813) skew(3deg) translate(2px);}
Para adicioná-lo no blog basta adicionar:
<a href="url" title="Nome"><img src="link-da-imagem" class="retract" /></a>
A única coisa que você vai modificar é o tamanho da sua imagem, que eu já coloquei em negrito.
Goodbye! 


29 comentários:

  1. Muito fofo esse efeito! Com certeza eu vou usa-lo, por que dá para regular pelo html o tamanho da imagem. E eu odeio ficar fazendo aquele monte de imagens minúsculas, sem saber se vai ficar na largura da sidebar *U*
    Beijuhs. || † Ieah

    ResponderExcluir
  2. Awnnn, gatinho çeduzente demais, pfvr ♥

    OMG, que efeito divoso, gentem *OO* Adorei, u-u

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
  3. Gostei do efeito bem discreto. Eu apoio sua decisão, na verdade achei um máximo, foi ótimo o debate do post anterior da Mandi, eu desabafei e foi um alívio.

    http://mundodeliina.blogspot.com.br/

    ResponderExcluir
  4. Esse efeito é super fofo *-*
    Um beijo
    http://bombasticmusics.blogspot.com

    ResponderExcluir
  5. Gatinho delicia :p Roubou meu coração SHAHSHAHS'
    Lindo o efeito, nunca tinha visto. ^^

    Beijos, Annie
    >>> nerdsfly.#blogspot.com.br <<<
    (Retire o jogo da velha (#), caso venha me fazer uma visitinha *U*)

    ResponderExcluir
  6. Ui, gatinho me seduziu ashusahua. Adorei o efeito, sua bipolar >3< ririri

    ResponderExcluir
  7. Fico muito legal com esse tuto! Vlw :)

    David - Leitor COmpulsivo

    ResponderExcluir
  8. Que efeito divo* adorei o tuto
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  9. Adorei o efeito *O* Fica bem legal >3<

    Kissus
    Mar de Glitter

    ResponderExcluir
  10. Ah eu já tinha visto um parecido, só que ele meio que ia e voltada, como o coração batendo. Mas esse é mais bonitinho, por ser mais delicado e ter a transição lenta. bezzo, sarah
    http://agd-doce.blogspot.com.br/

    ResponderExcluir
  11. Adorei esse efeito o3o
    beijinhus~♥
    ♥Naka-chan||@Naka-chan no Sekai (N.S)♥

    ResponderExcluir
  12. Adorei o efeito, talvez use.
    Kiss,
    CAT GIRL

    ResponderExcluir
  13. Que efeito divoso, amei *u*
    Esse gatinho também me seduziu u.ú Ah, e concordo que você deve dar mais opiniões aqui no blog, se está infeliz desse jeito, mude, para melhor, claro UASHAS
    Beijitos <3
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
  14. ótimo tutorial!!!

    :)
    www.meninaperdida.com

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ