23 fevereiro 2013

Efeito Rotate {Exclusivo!}

| |
Sei que é chato ficar pedindo e tals, mas peçam algo na Ask
Créditos se usar
Boa tarde, amantes no HTML!
Desculpa por ter ficado esse tempo sem postar, amores. É que minha inspiração para criar códigos está no nível zero e como eu não sei o que querem (utilitários) eu tenho medo de que o que eu postar não seja útil e então acabo não postando.
Mas eu prometi pra mim mesma ontem: "Depois do jantar, eu vou postar", mas eu acabei não postando porque teve uma chuva muito forte, não foi uma simples chuva, foi o tipo de chuva que inundou a minha casa. Estragou meu armário, meu material escolar (apostilas, livros) e outras coisas, felizmente não foi pior.

Mas deixa pra lá, vamos ao tutorial!
Eu estou usando o efeito ali no gadget Welcome. A imagem gira e depois fica com o efeito grayscale (preto e branco). Mas eu editei para que pudesse ser usado em outros lugar como afiliados e equipe, pois eu o fiz para ser usado em gadget Welcome, no cantinho.
Para ver, é só...

Curtiram? Então, cliquem em leia mais!

No HTML do seu blog, aperte F3 e procure por ]]></b:skin> e acima cole:

.EFEITO-ROTATE-ISA {FLOAT: LEFT; BORDER: SOLID 5PX TRANSPARENT; -WEBKIT-BORDER-RADIUS: 100PX; -MOZ-BORDER-RADIUS: 100PX; BORDER-RADIUS: 100PX; -WEBKIT-TRANSITION-DURATION: 2.90S;}
.EFEITO-ROTATE-ISA:HOVER {-WEBKIT-TRANSFORM: ROTATE(-720DEG); -WEBKIT-FILTER: GRAYSCALE(100%); -MOZ-FILTER: GRAYSCALE(100%); -O-FILTER: GRAYSCALE(100%);}
No FLOAT: LEFT; posiciona a imagem. Como eu uso no welcome, do lado do texto, ela está posicionada a esquerda. Mas caso use nos afiliados ou equipe, apague esta parte, ok?
BORDER: SOLID 5PX TRANSPARENT; é a borda. Aqui ela está transparente. É só mudar a cor.

••••••••••

Agora aperte HTML/JavaScript e cole:
<a href="LINK"><img src="URL DA IMAGEM" class="efeito-rotate-isa"/></a>
<a href="LINK"><img src="URL DA IMAGEM" class="efeito-rotate-isa"/></a>
<a href="LINK"><img src="URL DA IMAGEM" class="efeito-rotate-isa"/></a>
<a href="LINK"><img src="URL DA IMAGEM" class="efeito-rotate-isa"/></a>
Só mude o que se pede, e salve.

••••••••••

Espero que eu tenha ajudado como o tutorial. Se usar ou repassar, creditem porque deu trabalho.
Beijos e bom dia *-*

15 comentários:

  1. Nossa, que efeito lindo *uu*
    Parabéns, ficou perfeito mesmo <3

    Kissus :3
    mikicandy.blogspot.com

    ResponderExcluir
  2. Legal o efeito,bem diferente :3 beijos

    ~~Quem precisa de tv para ver Beyoncé // perfil

    ResponderExcluir
  3. Anwww, que lindo adorei ele o: podia bem usar só que já usei um efeito diferente no novo layout e estou com preguiça de usar, favoritei pra usar no próximo layout c:

    Linhas-corrigidas.blogspot.com

    ResponderExcluir
  4. Ahhhh que efeito lindooo
    irei usar no meu proximo lay concerteza
    Amei o blog, seguindo
    bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  5. Sou a seguidora numero 100!!
    cadê meu presente?? to brincando! amei teu blog muito útil!
    gostodequeijo.blogspot.com

    ResponderExcluir
  6. oi , adorei o tuto . vc explica muito bem ! gostaria de me filiar , aceita :?

    http://quaseprincipa.blogspot.com

    ResponderExcluir
  7. Adorei o tutorial,bem legal o efeito.

    Beijos
    Amora R.

    ResponderExcluir
  8. Uau o layout ta incrível !!
    Bacana esse efeito ;]

    Beijos

    ResponderExcluir
  9. É um efeito lindo, gostei demais! Beijos!
    pqngarota.tk

    ResponderExcluir
  10. eu coloquei no blog um, mas não foi aqui que peguei não s;
    eu adorei!

    Comentário fixo por tempo determinado:

    Se não ocupar muito seu tempo, gostaria de pedir-lhe um favor: Curta a fan page do meu blog? Estou querendo fazer um mega sorteio, com várias coisas, mas a page precisa ter um pouco mais de curtidas! Se puder me ajudar, agradeço muito, e se já ajudou, obrigada e ignore o comentário! Clique aqui para curtir a página no facebook.

    @esteffanifontes, do blog Aos Dezesseis Anos
    aosdezesseisanos.blogspot.com.br

    ResponderExcluir
  11. como que vc faz esse efeito gostaria de saber e queria criar um?

    ResponderExcluir
  12. Colo quei ne um blog mas não funciono :/

    ResponderExcluir

« »