Efeito Arco íris em Links e Imagens


POSTAGEM ATUALIZADA EM 28 DE SETEMBRO DE 2017
Oie ;3 Há muito tempo postei para vocês o script do efeito arco-íris em links. Com ele é possível fazer com que um link fique super colorido quando se posiciona o ponteiro do mouse nele. Acontece que o código estava obsoleto e o atualizei hoje. Junto a essa atualização trouxe um código que aplica o mesmo efeito, só que em imagens e com CSS. Veja os efeitos no blog de testes: Laboratório Kawaii.

Perceba que ao passar o mouse sobre a imagem ela fica colorida e colorida de novo quando tirar o mouse; nos links também ocorre o mesmo, ficando coloridinhos.
Para aplicar o efeito arco-íris nos links, adicione este script ABAIXO de ]]></b:skin>:
<script src='http://kawaiiicode.github.io/arcoiris.js' type='text/javascript'/>
Para aplicar o efeito arco-íris nas imagens cole este código ACIMA de ]]></b:skin>:
img{
border: none;
-webkit-transition:1s;
margin: auto;
padding: 0;
}
img:hover{
-webkit-transition:1s;
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
}

Com relação às imagens, será aplicado em TODAS as que estiverem em seu blog; ainda não descobri como aplicar em imagens específicas, caso descubra, posto aqui ok?
Espero que gostem e beijos...
Fontes: Jackie e Nadirah

13 Comments

  1. Iza うさぎ~08 março

    que lindo sempre quis aprender como se faz esse efeito *o*

    muito kawaii x3 <---- vc deve estar acostumada com frases assim, né? rs

    mas realmente gostei ^-^ bye! o/

    ResponderExcluir
  2. Gabi08 março

    Muitíssimo obrigada!
    Há tempos procurava o efeito para imagens!
    Thank you!!!!

    ResponderExcluir
  3. Roberta09 março

    Fico muito contente por vocês gostarem ^^
    Muito obrigada e beijinhus <3

    ResponderExcluir
    Respostas
    1. Unknown07 maio

      aii eu amei ! muuito lindo muito muito muitoo !!!!!

      Excluir
  4. ✖~ Nakashita Beel09 março

    Adorei adorei adorei muito amei <3<3 liindo o efeito, mas acho que combinaria mais se o blog for colorido ne? rsrs
    kissus ;33

    ResponderExcluir
    Respostas
    1. Roberta09 março

      Também, e pode add cor a blogs com cores neutras ^^
      Beijinhus e obrigada!!!

      Excluir
  5. Idril10 março

    Adorei o efeito, tutorial bem legal :)

    ResponderExcluir
  6. Karine Maria (Marizinha)15 março

    olá, amei o blog, estou seguindo, eu ficaria realmente muito feliz se você seguisse meu blog, ele um blog simples, por isso eu gostaria muito que você seguisse, o seu blog é fantástico! me ajudou com muitas coisas! obg http://maniademeninak.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Roberta15 março

      Obrigada e bem vinda! Com certeza visito você sim ^^
      Beijinhus <3

      Excluir
  7. Inglês de Verdade05 dezembro

    Vc é uma fofa! Q blog mais fofinho! Pena que sei lá porque, não deu certo o arco-iris no meu blog! Uma linhazinha só de código e não deu certo! rsrs
    To construindo o meu blog agora, mas vai ser uma espécie de curso de Inglês, só que com meus métodos coerentes, de como aprender a falar Inglês de verdade! Quando estiver pronto e ''no ar'', eu venho te chamar! rs
    Seu blog test é fofo demais tbm! bjs

    ResponderExcluir
  8. Unknown11 dezembro

    -Uaal muito show o tuto! Ameeei estou seguindo, segue de volta?
    http://cookiecomnutella.blogspot.com.br/

    ResponderExcluir
  9. サラ31 dezembro

    Deu super certo no meu blog!! *----* Visite, eu e minha amiga falamos sobre animes: http://anibhor.blogspot.com.br/ <3

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up