17 julho 2012

Efeito Fade e sem sublinhado nos links

Art-beautiful-black-blue-cute-favim.com-272495_large


Oi, oi alguém ai quer aprender um tutorial?
Hoje trouxe pra vocês um tutorial bem simples e fácil de fazer mas que no blog dá uma "pitada" cute.
Eu aprendi esse tutorial lá no Cherry Bomb, e já faz um tempinho. Olhá que lindo:


Mas Marie, por que você não tem esse efeito no CB? Eu ainda não tenho mesmo, mas já estou fazendo um design bem legal que vai ter esse efeito.

Sem mais enrolação vamos ao tutorial!




Mini gif 140 Abra o HTML do seu blog, aperte CTRL F ( ou F3 ) e pesquise por:

a:link {

Vai ser mais ou menos esse código aqui:

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

Mini gif 140 Apague todo esse código e no lugar cole:


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



Edite conforme o seu gosto, para isso use essa TABELA DE CORES.


Lembrando que essa parte não coloca o efeito na sidebar. Se quiser lá também procure esse código aqui e o apague:
( procure pelo primeira linha, vai ser mais facil)


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

Visualize e salve!



2 comentários:

  1. Tutoriais sao sempre bons, ajudam mt os blogueiros! Adorei!
    Linda, amei seu blog, ele e mt lindo, já estou seguindo! ^^

    Beijos. Amanda :)

    Maiskmoda.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom querida, vou seguir lá também!

      Charmosinha Beauty -----. Agradeço o carinho

      Excluir

LinkWithin

Related Posts Plugin for WordPress, Blogger...