22 de mai de 2012

Links em Fade e com borda

Heey ! Tudo bem com vocês ? Estou sentindo falta de um tutorial , então resolvi postar um , é como deixar os links do blog em efeito fade , acho super legal , aqui no blog tem , só que a diferença é que tem a borda , que também vou ensinar a colocar. Então vamos lá :
Procure no seu HTML o seguinte código:

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 para deixar os links fade, substitua por esse:
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;
}
Roxo : Cor sem passar o mouse
Laranja claro: Cor dos links visitados
Azul: Cor quando passa o mouse
Agora se quiser deixar igual ao blog , com a borda coloque esse código abaixo de : -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
border-bottom: 1px dashed #SuaCor;
Pronto o efeito já estará colocado , mas lembre-se esses códigos não funcionaram na sidebar. Para que na sidebar fique o efeito fade também , procure esse código e apague ele todo:
.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;
}
Gostaram do tutorial ? Longo né? Mas mesmo assim é útil e deixa seu blog lindo.Comentem ! 

8 comentários:

  1. Aceito afiliação siim amor,qual o nome da sua bonequinha no stardoll para eu te adicionar ?

    ResponderExcluir
  2. Awwn, adorei o tuto! eu sempre uso o link em fade *-*
    Ameei aki, seguindo claro #HAHA Bjuus!

    ---> Kiara-loveluv.blogspot.com

    ResponderExcluir
  3. Bom o tuto, seu blog é a coisa mais linda =) O designer, e a organização!

    Beijos♥

    http://makeielook.blogspot.com.br/

    ResponderExcluir
  4. fica muito dahora no blog ^^

    seguindo aqui, se puder passa no meu blog
    http://blogdamazzei.blogspot.com.br

    ResponderExcluir
  5. Amei fica show esse efeito e lindo rs

    http://www.perfeitinhablog.com/

    ResponderExcluir
  6. Adoorei o tuto! cada efeito lindo : )
    Depois da uma passadinha la no meu blog?
    www.paradateen1.blogspot.com
    beijos !

    ResponderExcluir
  7. Ow! ameiii!
    faz uma visitinha em meu blog! Bjs
    http://retratandocoisas.blogspot.com.br/

    ResponderExcluir