sexta-feira, 1 de junho de 2012

Hover dos links em negrito

Primeiramente, feliz dia das mães! Essas pessoas que fazem grande parte da nossa vida! Bom, já viram que ohover dos links aqui do blog ficam em negrito? Eu acho bem fofo e é uma forma de destacar os links. Pra quem não sabe o que é hover, é o efeito que dá quando você coloca o mouse em cima. Foi a Paloma que pediu esse tutorial. Ah, e tem uma novidade! A Brenna me pediu pra fazer um layout free. Eu vou tentar fazer, mas nada está certo ainda, ok? Se ficar bom, eu posto pra vocês! Enfim, vamos pro tutorial agora?


Primeiro, salve uma cópia do seu template. Vá no seu HTML e procure por: a:hover {
Você vai achar várias partes assim. Mas vamos usar a primeira, certo? Ela vai estar desse jeito:
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
Primeiro, você muda o text-decoration:underline; para text-decoration:none;. Porque com underline, seus links vão ficar com aquele sublinhado feio em baixo, e com none, vai ficar sem nada. A color, que seria a cor do hover, você pode mudar no designer do modelo ou no próprio HTML. É só colocar, por exemplo, color: #000000;.
Depois te ter feito as alterações, vamos colocar o negrito. Antes de fechar a chave }, abaixo do color, você coloca em baixo: font-weight: bold;
Ficando desse jeito:

a:hover {
text-decoration:none;
color: $(link.hover.color);
font-weight: bold;
}
Prontinho! É só salvar e ver se deu tudo certo. Caso alguma coisa dê errado, me falem! Espero que tenham gostado. Beijos.

Nenhum comentário:

Postar um comentário