Modificando links
Nesse Tutorial, Vamos aprender como personalizar nossos links, e dar uns efeitos legais.
Podemos notar que nos nossos templates, no código e na configuração dos links, há o seguinte código:
}
A, A:link{color:#000000;text-decoration:none} ->
Cor do link atual
A:visited{color:#000000} ->
Cor do link já visitado
A:active{color:#000000} ->
Cor do link ativo
a:hover {text-decoration: underline; color: #000000; font-weight: bold;}
-> Outras propriedades
do link
Na parte outras "propriedades do link", podemos alterá-lo da seguinte forma:
text-decoration: none; -> Underline é o mais comum, que é aquele efeito que quando pousamos o mouse no link, o mesmo fica sublinhado.
color: #000000 -> É a cor que ficará o link quando pousarmos o mouse
Lembram que eu disse que o underline é o efeito mais comum? Vejam a tabelinha de efeitos. Você poderá trocar UNDERLINE por outro efeito no seu código. Se caso há efeitos que não estão no seu código, acrescente logo a seguir do efeito UNDERLINE.
Códigos dos efeitos:
|
underline
|
text-decoration:underline;
|
|
underline
overline
|
text-decoration:underline
overline;
|
|
cor
de fundo
|
background-color:
#FFFFFF;
|
|
negrito
|
font-weight:bold; |
|
itálico
|
font-style:italic; |
|
riscado
|
text-decoration:line-through; |
|
tamanho
da fonte
|
font-size:#pt; |
|
Troca
de posição
|
position:relative;left:#px;top:#px; |
Efeitos no cursor do link:
Pouse o mouse em cima do nome para ver o tipo de cada cursor.
|
Nome
do cursor
|
Código
|
|
Cruz
|
cursor:crosshair;
|
|
Interrogaçao
|
cursor:help;
|
|
Esperar
|
cursor:wait;
|
|
Vertical
|
cursor:n-resize;
|
|
Horizontal
|
cursor:w-resize;
|
|
Horizontal2 |
cursor:e-resize;
|
|
Diagonal1
|
cursor:ne-resize; |
|
Diagonal2
|
cursor:se-resize;
|
|
Diagonal3
|
cursor:sw-resize; |
|
Mão
|
cursor:hand; |
Parece complicado não é? É só a falta de costume de modificar o código dos links, mais depois que pegamos a prática fica bem facinho! Espero que tenham entendido...