7 de janeiro de 2008

Aprenda a estilizar links usando icones

Icones são uma maneira fácil e simples de deixar sua página mais atraente e amigavel. Adicionar icones aos links (visitado, externo, etc) ajuda o usuario a saber aonde está indo. No post de hoje você vai aprender como adicionar icones com css.

Antes de começar é bom você ter as imagens que vai usar, para isso crie os seus próprios icones ou baixe um pacote de icones gratuitos.

Para inserir icones em sites iremos utilizar a técnica de inserir imagens com CSS.

a:visited {
background: url(../imagens/visitado.png) no-repeat top left; /*insere o icone à esquerda de links visitados*/
padding-left: 15px; /* Espaço entre o icone e o texto do link*/
}

Usando essa técnica você pode conseguir efeitos interessantes como o desse exemplo.

Referencias
"Checkmark" Your Visited Links with Pure CSS

Tags:

3 comentários:

Majesticskull disse...

Fica legal mesmo estilizar os link's assim. Valeu cara.

Majesticskull disse...

se fizer o código como você fez a imagem repete no fundo do link por padrão, tem que acrescentar:

background-repeat: no-repeat;

Abraços!

Guido disse...

Olá Majesticskull,

Obrigado por apontar o erro, post corrigido!