05/12/2014

02. Maratona CSS: Efeito Arco íris em Links e Imagens

||

Como vão nesse dia? Eu vou bem em partes... partes mesmo, acordei com a garganta dolorida e com o braço esquerdo doendo, acho que dormi em cima dele. ...eu odeio ficar com a garganta doendo. Mas também estou super feliz, realizei minha compra dos livros de Dezembro, graças as promoções dessa semana consegui comprar nove livros! E um box com cinco livros! \o/ Como está tarde e dolorida,  uma postagem bem rápida e pratica para vocês, amanhã trago algo mais legal. O efeito de arco íris em links e imagens do blog. Não me lembro se já postei aqui no BC, pois é um tutorial bem antigo se já postei me desculpem. Achei esse tutorial no site Reino Kawaii, o efeito acho muito bonitinho e fica lindo em layouts simples ou colorido (regulado), já cheguei a usar uma vez. Bom então vamos parar de blá, blá, blá e ir ao tutorial.

Agora vou parar de blá blá blá e vamos ao tutorial, é muito fácil de se aplicar. Para aplicar esse efeito nos links de seu blog,  vá ate HTML e procure por ]]></b:skin> e acima dele cole:
<script src='https://sites.google.com/site/drwtexte/link-arco-iris/tab-view.js'/>
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 esse código todas as imagens do seu blog ficarão com esse efeito; imagens da postagem, sidebar ou onde mais se encontrarem. Caso queira apenas nas imagens da postagem troque o img por img post. Sei que esse tutorial é antigo mas espero que gostem assim mesmo.

20 comentários:

  1. Xent, eu tava quase cavando o chão procurando por esse tuto kkkkkk
    Obrigada por ter postado ^^

    Kissus http://c-omebackhome.blogspot.com/

    ResponderExcluir
  2. Que efeito legal, só conhecia o da foto, mas não o do link.
    -
    Smile Freeze

    ResponderExcluir
    Respostas
    1. Entendo ^^ mas que bom que gostou

      Excluir
  3. Tô adorando essa maratona, um tutorial mais perfeito que o outro!
    www.dai-sies.blogspot.com

    ResponderExcluir
    Respostas
    1. Que boom, obrigada por gostar.

      Excluir
  4. Eu estou bem e ti? melhoras =( da garganta, ei faz uma resenha dos livros que vc comprou em quanto ao tuto eu amei. *-*

    Beijos
    b-osskingdom.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom, fico feliz por isso. Obrigada, já esta melhorando. Faço sim, farei no meu outro blog e deixarei o link aqui. ^^ Que bom, que gostou do tuto. :3 Kiss

      Excluir
  5. O do link não funcionou, só o da imagem :(
    Mas mesmo assim é lindo ^y^

    HTMLittle || Aguardo sua visitinha >3<

    ResponderExcluir
    Respostas
    1. Sério? Deve ter quebrado, mas já coloquei outro link no lugar. Esse esta em minha hospedagem funcionando direitinho. ^^

      Excluir
  6. Nossa Wendy essa maratona creio eu que vai ajudar muita gente, principalmente quem não sabe muito sobre o css, abraços adorei o efeito.

    cherry--berry.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom ^^ fico feliz em poder ajudar. :3

      Excluir
  7. Hey!
    Belo tuto.
    Só passando pra avisar e me desculpar pela demora de te colocar nos meus afilhados enquanto tu já tinha posto aqui. De qualquer forma desculpe e já está lá ♥

    thingstolater.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada :3 Que isso tudo bem ^^

      Excluir
  8. Adorei! Como você colocou seus afiliados em uma nova janela?
    Obrigada!
    Visite my blog: http://winxsempree.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Aqui o tuto :3 http://www.bunnycrazy.net/2014/12/pop-up-personalizado-com-css.html

      Excluir
  9. Acho que vou usá-lo no meu próximo layout, mesmo sendo broxante (⌒▽⌒)☆ ahsahsuya
    Amei o layout ♥
    Chu ~ ♥
    (Sabe aquela prima distante que você vê uma vez por ano? Sou eu auhsuahsua mas sou da família ainda, ok? u.u Prometo vim mais aqui! Minhas sinceras desculpas ♥)
    Dá uma passadinha lá? http://gummycloud.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hihi entendo ^^ obrigada por gostar.
      Ah Nina tudo bem, mesmo que demore um tiquinho as vezes sempre sentirei aquela saudade e anciedade de ver você novamente.

      Excluir
  10. EFEITO ARCO-ÍRIS DIVOOO ♥
    Eu estou bem, obrigada q. Aiin, melhoras pela sua garganta e pelo braço :')
    Cinco livros T3T Livro é tudo de bom, aproveite. Ganhei um monte por causa do meu aniversário que foi 25 de novembro, um monte mesmo, tipo 1página, Tempest, Harry Potter (u3u), Quem é você Alasca, O vermelho veste prada e outros, todos muito ótimos ♥
    Efeito fofo, meu Deux ^3^

    Besos;
    {{Misty}}

    ResponderExcluir
    Respostas
    1. Obrigada Mio. Que bom! Ah obrigada, logo logo estarei bem. É um box de uma série antiga, mas nunca pude ter apenas li pegando uns aqui e uns ali. Obrigada, vou sim. SÉRIO? Puxa parabens atrasado! ^^

      Excluir