20/10/12

Tutorial : Links em fade e sem sublinhado


Vou ficar ausente esta semana. Vocês sabem, semana de testes... Mas já tenho muitos posts em rascunho e vou tentar atualizar o blog =)

Salut ! Vim trazer um tutorial :-)

Para quem não saiba, os links em fade tem a transição de uma cor para a outra mais lenta não entenderam nada, pois não ?  Experimentem !


Para colocar vai até ao html > ctrl + f > pesquisa por a:link {

Irás encontrar um código parecido a esse :

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);
}

Apaga-o e cola por cima :

a:link {
color: #E9A1C0; /* Cor do link*/
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; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

Edita as cores como quiseres. Depois, pesquisa por .sidebar .widget a:link {
E apaga esse código :

.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;
}

Créditos : Cherry Bomb

7 comentários:

  1. Eu adoro esse efeito, ainda hoje postei o tutorial dele hihi'
    Eei, amei o blog e já estou seguindo, o blog é muito perfeito, achei bem legal você morar em Portugal =3
    Princesa de Jeans

    ResponderEliminar
  2. Fica legal, né?
    Beijo, Lili
    Princesa Imperfeita / Layout novo + Sorteio perfume da CH.

    ResponderEliminar
  3. É ótimo o resultado não é? Fica bem legal!
    Bjão!
    http://blog-part-of-me.blogspot.com.br/

    ResponderEliminar
  4. Oi !!! Meu blog é novo e eu queria que você me ajudasse a divulgar ele (se quiser) Ficaria muito feliz!!! Conto com sua ajuda :) Ah, e tem até uma campanha Diga Não ao Bulling Virtual lá no blog, tbm conto com o seu apoio!!!
    http://glamourtopoficial.blogspot.com

    ResponderEliminar
  5. Eu acho este efeito super lindo !
    kawaiicolorsbyjamilly.blogspot.com.br

    ResponderEliminar
  6. ótimo o tutorial , além do efeito ser super lindo :)

    http://evelynrestyles.blogspot.com.br/

    ResponderEliminar
  7. ótimo tutu! ameei <3'
    Bezoos :3 --> My Candy Space (acesse pelo meu perfil)

    ResponderEliminar

-Não coloques o link do teu blog para ele não ser excluído. Retribuo mesmo que deixes só "Cat Girl".

-Comentários do género "Seguindo, segue de volta", "Adoro seu blog", "Novo concurso..." não serão respondidos.

-Fala alguma coisa sobre o post, senão não retribuo.

-Aceito críticas construtivas, nada de palavrões ou coisas do género.

Beatriz


Layout by Beatriz D. ~ Cat Girl | Proibido cópias