Estilizando links
Neste tópico, vamos aprender como deixar os links em uma página web ainda mais interessantes e atraentes. Vamos usar a criatividade para transformar os links em verdadeiros tesouros!
Cores e Sublinhado
Vamos começar falando sobre as cores dos links. Assim como em um mapa do tesouro, podemos dar destaque aos links usando cores vibrantes.
Além disso, podemos remover o sublinhado padrão dos links e substituí-lo por um efeito especial, como um traço brilhante, para deixá-los ainda mais bonitos.
Exemplo de código:
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-decoration-color: gold;
}
Efeitos ao Passar o Mouse
Imagine que cada link é uma joia escondida! Quando passamos o mouse sobre um link, ele pode brilhar e revelar seu valor.
Podemos adicionar efeitos de transição suave, como mudança de cor ou sombreamento, para criar uma interação mágica com o usuário.
Exemplo de código:
a {
transition: color 0.3s ease;
}
a:hover {
color: red;
}
Estilizando Links Visitados
Quando encontramos um tesouro, deixamos uma marca para sabermos que já o descobrimos. Da mesma forma, podemos estilizar os links visitados para que os usuários saibam quais páginas eles já exploraram.
Podemos alterar a cor ou adicionar um ícone especial ao lado do link visitado.
Exemplo de código:
a:visited {
color: purple;
}
a:visited::after {
content: "👁️";
}
Agora que você sabe como estilizar links e deixá-los mais atraentes, é hora de dar um passo adiante e aprender a estilizar imagens em suas páginas web.
No próximo tópico, vamos explorar técnicas para personalizar imagens usando CSS.
Quer mais informações sobre o assunto? clique em sabia mais
