21 de fev de 2014

Efeitos em Links

Olá pessoal, trago para vocês mais um pouco de css. Agora vou tirar suas dúvidas
como funcionam os efeitos nos links de seu blog.

Os efeitos em links são possíveis através de declarações de regras de estilo para as pseudo-classes do elemento do HTML.

  1. a:link........define o estilo do link no estado inicial;
  2. a:visited...define o estilo do link visitado;
  3. a:hover.....define o estilo do link quando passa-se o mouse sobre ele;
  4. a:active....define o estilo do link ativo (o que foi "clicado").
É importante a ordem de definição das regras para os estados dos links.

a:link
a:visited
a:hover
a:active

Por padrão, os links são sublinhados e na cor azul.
Um efeito muito comum em páginas web é o de se retirar o sublinhado do link em seu estado normal, mudar a cor e fazer "aparecer" o sublinhado, quando o mouse é passado sobre ele.
Esse efeito obtém-se facilmente com CSS.
Abaixo a regra para esse simples efeito:

<style type="text/css">
a:link, a:visited {
 text-decoration: none;
 }
a:hover {
 text-decoration: underline; 
 color: #f00;
 }
a:active {
 text-decoration: none;
 }
</style>



Exemplo para o hover:

a:hover {
 letter-spacing: 10px;
 color:red;
        border-bottom:2px solid #000000;
 }

No exemplo acima, no hover ( quando o mouse estiver sobre o link) terá um espaçamento
da letra em 10px, terá cor vermelha e uma borda em baixo de 2px de cor preta.

Enfim pode-se colocar nos links borda, cor, fundo, sublinhado, aumentar ou diminuir a letra. Enfim fazer
infinitos efeitos nos links do blog.

Espero ter ajudado. Qualquer dúvida pergunte.
 


Nenhum comentário :

Postar um comentário

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo