in , ,

Efeito CSS em links

Creio que muitos que trabalham com webdesign já estão familiarizados com CSS, e que tal assunto é “mamão com açúcar”.
Porém, para aqueles que ainda estão em fase de aprendizado, eis aqui uma lição bem simples sobre efeito CSS em links.

Resumo do tutorial:

Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc…) diferentes através de CSS.

Sintaxe

A sintaxe das pseudo classes:

seletor:pseudo classe {propriedade: valor}

As classes em CSS podem também ser usadas com pseudo classes.

Esta regra permite que você defina diferentes efeitos para links localizados em diferentes lugares em uma mesma página.

seletor.class:pseudo-class {propriedade: valor}

Os “seletores:pseudo classe” de links

São quatro as pseudo classes dos links:

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”).

Isso é apenas uma parte do tutorial do site maujor.com, que conta com diversos assuntos sobre CSS.
Se deseja ir mais a fundo no assunto e descobrir como adicionar sublinhado e sobrelinhado, acresentar fundo, e outros efeitos em links, acesse o tutorial completo.

Escrito por Guilherme Dantas

Fundador do Designerd, empreendedor digital, apaixonado por design, marketing digital, carros, cinema, astronomia e física quântica. Arranhador profissional de violão nas horas vagas.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Loading…