O CSS por padrão não trás grandes variações de estilos para as underlines, te dá apenas opções básicas e essenciais.
Mas caso você queria mudar um pouco o estilo dos seus links, o CSS ti dá a oportunidade de fazer isso. Com criatividade dá pra criar algo bacana, mudando e incrementando o estilo do seu web site.
Vamos começar
De início você deve tirar o estilo padrão dos links:
a { text-decoration: none; }
Agora você deve criar a imagem que ficará sob o link. Essa imagem se repetirá horizontalmente.
Com a imagem já pronta, iremos inserir ela. Para isso será criado um background-image para esse elemento:
a { background-image: url(underline.gif); }
Agora essa mesma imagem terá que se repetir horizontalmente ao longo do texto, não verticalmente, caso contrário a imagem tomará conta de todo o fundo do texto:
a { background-repeat: repeat-x; }
Para o link ficar sob o texto é necessário que se faça um leve posicionamento na imagem. Caso contrário o link ficará no centro do texto, passando de underline para line-through, que não é o nosso objetivo:
a { background-position: 100% 100%; }
Caso queria um espaço maior entre o texto a imagem, você pode fazer o seguinte:
a { padding-bottom: 5px; }
Se por um acaso a linha de cima estiver muito próxima da linha de baixo, você pode adicionar mais espaço entre elas utilizando o atributo line-height.
Combinando as propriedade
a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 5px;
}
Caso queira que a imagem apareça somente quando o mouse estiver sob o link ( rollover ), faça o seguinte:
a {
text-decoration: none;
padding-bottom: 5px;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
Exemplos
http://ezshare.de/fi...8124/235/a.html
Esse tutorial foi baseado em um dos artigos do ALA.
É esse o processo para criar um visual diferente para os links, fácil-fácil.
Qualquer coisa entre em contato.
Até mais !
Edição feita por: Kaled, 08/01/2008, 19:37.
