Tuto totalmente retirado de: ~www~
Hooy gurizada atendendo a alguns pedidos hoje eu vou ensinar como personalizei os links do meu blog.
Eu uso o efeito tracejado + links em fade
Entenda: Pra quem ainda não sabe o efeito tracejado é quando você passa o mouse em cima de um link e aparece alguns tracinhos em baixo.
Links em fade é quando você passa o mouse no link e ele muda de cor bem devagar.
O código que o acompanha deve estar mais ou menos assim:
a:link {
text-decoration:underline;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:none;
color: $(link.hover.color);
}
Substitua tudo por:
a:link {
color: #ff7fb2; /* -------- 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: #ff7fb2; /*------ COR DOS LINKS VISITADOS -----*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #FF82AB; /*----- COR DOS LINKS AO PASSAR O MOUSE -----*/
text-decoration:underline;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
text-decoration:underline;
color: $(link.hover.color);
border-bottom: 1px dashed #FF82AB; /*----- COR DO TRACEJADO -----*/
}
OBS1: As cores dos links podem ser alteradas no design do modelo mesmo
OBS2: Se quiser tirar o sublinhado e deixar só o tracejado troque os trechos underline por none
OBS3: A outros tipos de bordas além da dashed (tracejada) como a dotted (pontilhada) por exemplo.
Depois de editar a seu gosto é só salvar! Espero que gostem ~~Bye bye~~
Confesso que não tenho paciência pra personalizar links mais bacana o tutu!
ResponderExcluirhttp://cantinhodostutus.blogspot.com.br/