31 de ago. de 2011

Links em fade - Entenda!

Cupcake26_large

  Tá muito difícil para eu postar agora... minha internet é um lixo, caindo toda hora. E ainda por cima to entrando em clima de provas. Quando eu falei que minha internet tá caindo toda hora, estava mentindo. Pois ela tá é caindo à cada minuto. Tá beeeeem sufocado para eu postar! Mais tirei um tempinho e vou postar o que eu prometi para uma leitora: Links coloridos em fade! Vocês perceberam já que quando passamos o mouse em algum link daqui do blog, ele muda de cor aos poucos... e isso se chama: Fade. Vamos aprender?

Mais é claro que no seu template já deve conter algum código que deixa os links coloridos, por isso você proucurar por:

a:link {
  text-decoration:none;
  color: $(link.color);
}
a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}
a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}
Agora, substitua este código pelo código abaixo:
a:link {
color: #E9A1C0;
text-decoration: none;
-webkit-transition: color 
0.7s ease-out;-moz-transition:
color 
0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #33CCCC;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
  • Azul bebê: Cor sem passar o mouse;
  • Lilás: Cor dos links visitados; 
  • Azul: Cor ao passar o mouse;
  • Laranja: Quanto maior o número (0.8s, 0.9s [...]) mais lento será o fade de cores. Quanto menor (0.6s, 0.5s [...]) mais rápido será a transição das cores.
ATENÇÃO! Os links da sidebar vão ficar sem esse efeito, para fazer ele funcionar proucure por e apague todo o código abaixo.
.sidebar .widget a:link {
  color: $(widget.link.color);
  text-decoration: none;
}
.sidebar .widget a:visited {
  color: $(widget.link.visited.color);
}
.sidebar .widget a:hover {
  color: $(widget.link.color);
  text-decoration: underline;
Faça as modificações necessárias e visualize, se estiver tudo certo, salve! E está aí, espero que tenham curtido. Beijos, @emilycaaroline

27 comentários:

  1. Ameii já fiz no meu blog o efeito é muito legal, obg por compartilhar :D
    http://meninasapeca.tk/

    ResponderExcluir
  2. Tava procurando isso a um tempão! obrigada =)

    www.bombadecereja.tk

    ResponderExcluir
  3. Ooi!
    o seu blog é PERFEITOO! Me ajudou muito com os tutoriais. Muito Obrigada. E claro, que não deixaria de seguir!!
    Segue o meu também?

    Beeijos=**
    www.blogmodasdegarotas.blogspot.com

    ResponderExcluir
  4. Adorei, vou testar lá no GI, fica um efeito bonito ao contrário daqueles que os blogs postam por aí, aquele quase deixa a pessoa cega rs. Eu vi o tuto lá no Ecleticu's, aquele blog é muuito perfeito *o* A unica diferença do tuto é que aquele ensina como por fundo na barra fixa e no meu como por na barra móvel ;)

    goimagines.blogspot.com

    ResponderExcluir
  5. Ah, ensina como personalizar a área dos comentários? Eu vi um tuto no Menina Nerd mas não deu muito certo...

    ResponderExcluir
  6. Flor , preciso de vc ! Eu tentei fazer o tuto mais não deu certo porque eu não achei o codigo para procurar pois o meu feito e feito com um mcodigo que vc acrecenta depois do skin , sabe ?! Em fim não achei vc podia me falar qual outro codigo que eu possa procurar para adicionar este efeito ?!
    Me responda por aqui mesmo pois meu blog está de reforma ! Obrigada flor e desculpa a amolação !
    Bjãao,
    Rafa

    ResponderExcluir
  7. Amei o Tutorial. Eu já tinha visto esse efeito em outros Blogs, mas não sabia o nome desse Efeito e nem como procurar. Créditos ao Extras Place Fame!

    http://blog-onedream.blogspot.com/

    ResponderExcluir
  8. Super legal! *---*
    É mas eu queria e pedir uma coisinha, pode?
    Eu reparei que seu blog agora está com as pontas arredondadas, você poderia ensinar com faz? POR FAVOR? D=
    Beijos e até mais ..

    http://blogskygalaxy.blogspot.com/

    ResponderExcluir
  9. Rafaela: Proucura por a:link, ou a:hover ou a:visited. (=

    ResponderExcluir
  10. Que bom que gostou das indicações. *-*

    ResponderExcluir
  11. adorei, super prático, vou usar depois.
    Tem post novo. Comenta?
    girlteen-s2.blogspot.com

    ResponderExcluir
  12. ei amor, tem post novo la no blog que tal conferir ? *-*
    http://paradateen1.blogspot.com/2011/09/teste-quem-voce-levaria-pra-praia.html ! ☻

    ResponderExcluir
  13. Oi amore, estou participando de um concurso, será que você pdoeria me ajudar?
    é só entrar ensse link:
    --> http://girlteen-s2.blogspot.com/2011/08/votacoes-abertas.html

    E votar em ser menina!

    Beijos e obrigada desde já!
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  14. Oi amore, estou participando de um concurso, será que você pdoeria me ajudar?
    é só entrar ensse link:
    --> http://girlteen-s2.blogspot.com/2011/08/votacoes-abertas.html

    E votar em ser menina!

    Beijos e obrigada desde já!
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  15. Oi emily, to doidinha para você postar o tuto de diminuir os marcadores, e tal....
    Amei esse tuto ai!
    Já estou usando, muito útil ^^
    Beijos
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  16. Owwn so thaaanks por fazer o tuto que eu pedi Emily :3 Nem sei como o Extras PF e o PF podem ser tão perfeitos! kkkk
    Já vou colocar lá :D
    Bjoos
    Girls On-Line

    ResponderExcluir
  17. Adorei seu blog,já esrou seguindo,segue de volta:http://cuteteenmy.blogspot.com/

    ResponderExcluir
  18. Flor , meu blog reabriu com desing novo ! Passa lá e deixa sua opinião ,ok?! Te espero ,ah consegui fazer o tuto , muito obrigada # !
    http://blogdasgarotasby.blogspot.com/

    ResponderExcluir
  19. AA esse blog e lindo!
    O Place Fame, também!
    Aceita afiliação?
    bjs
    charmofpink.blogspot.com

    ResponderExcluir
  20. Flor, me ajuda com uma coisa? como é que ajeita a letra do titulo do gadget? eu não consigo! já tentei mecher qe só. designer do modelo... HTML... não vai!
    www.blogueirasteen.blogspot.co,

    ResponderExcluir
  21. Noossa obg, todas as vezes que eu tentava fazer um tutorial pra fazer as mudanças nunca dava certo hj foi a primeira vez, axo que eu to com sorte pq hj é meu niiver

    ResponderExcluir
  22. Amei este efeito, lindo e fácil *o*

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  23. Aaah, valeu brigadíssimo gata.

    Kissus da Gabriela:
    4-brownies.blogspot.com

    ResponderExcluir
  24. Nossa, no meu blog não tem esse código para substituir. Será que é porque eu estou usando um layout completamente personalizado?
    www.tamirissindice.blogspot.com

    ResponderExcluir
  25. Adorei o tutorial, ficou perfeito no meu blog. Eu rebloguei, tudo bem? Coloquei os devidos créditos.

    diamondfearless.blogspot.com

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.