02/01/2012

Links em Fade (Removendo o sublinhado dos links)


Yo pessoal, como vão todos vocês? Trago mais um tutorial hoje para vocês de colocar linjs em fade, esse efeito da um toque de suavidade ao passar o mouse ele muda de cor (as cores que você colocar), e o mais legal que ele tira aquele sublinhado feio dos links. Mas antes de qualquer coisa os créditos vão para o blog Cherry Bomb, então vamos lá?
Então sem mais demoras entre em seu HTML e procure por:

a:link {

Abaixo dele você encontrara algo mais ou menos assim:

Códigos
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 apague toda essa parte! Tome cuidado para não apagar mais nada. Agora no lugar coloque o proximo codigo:

Códigos
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;
}

Mude as cores para qual vocês desejarem, agora o efeito não sera aplicado na sidebar mas caso queira procure por esse trecho em seu HTML e o apague.

Códigos
.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;
}

4 comentários:

  1. Ótimo tutorial ! Adorei , já estou usando nos meus links , é muito melhor sem o sublinhado ....


    thingslittlekawaii.blogspot.com

    ResponderExcluir
    Respostas
    1. Verdade é bem melhor sem o sublinhado, que bom que gostou.

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345