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