Home Me envie um e-mail! Feed
Blog do yogodoshi

Dica CSS: Usando ícones para indicar o tipo do link

Junho 8, 2009 at 9:18 pm · Categoria(s): Dicas XHTML/ CSS

Que tal avisar para o seu leitor (que não sabe que a URL do link aparece ali no canto inferior esquerdo quando você passa o mouse por cima) que o seu link leva para um arquivo .pdf, ou que o link serve para ele enviar um e-mail, antes mesmo dele passar o mouse por cima do texto do link ou clicar?

Fazia tempos que não dava alguma dica de CSS aqui no blog, então resolvi tirar um tempinho para escrever esta que usei no blog inovaTIvidade (jabá); onde você pode colocar ícones após links de arquivos do Powerpoint, do Excel, do Word, PDFs etc.

Exemplo:
Screenshot de como ficaria

Isso é algo bem fácil de se fazer via CSS, segue o código:

a[href$='.doc'] { padding:0 20px 0 0; background:transparent url(/imagens/icones/word.gif) no-repeat center right; }

Esse código faz com que todos os links que terminarem com .doc apareçam com o ícone do Microsoft Word na frente. Basta copiar e colar este código para cada extensão de arquivo que você desejar: .pdf, .ppt, .docx, etc.

Também é possível fazer o mesmo com os links para enviar e-mail através do código:

a[href^="mailto:"] { padding:0 20px 0 0; background:transparent url(/imagens/icones/email.gif) no-repeat center right; }

Vocês podem ver uma demonstração online do código no final deste post do inovaTIvidade.

Compartilhe!

feed Gostou do Blog?  Assine o RSS Feed ou receba em seu e-mail

Posts Relacionados:
- Removendo a borda pontilhada dos links
- Vejam o poder do CSS
- Templates em CSS prontos pra você criar o seu layout
- Dica de CSS: Float - Quando div pai não acompanha o tamanho das divs filhas
- Apostila Completa de CSS para download gratuito

Silvano Vilela diz,

Junho 9, 2009 @ 12:41 am

Opa Cayo, aplicação incluída e ativada, obrigado pela dica. Abração.

Joares Miranda diz,

Junho 10, 2009 @ 3:28 pm

Não conhecia isso no CSS… show de bola! Parabéns pela dica!

Thiago Bettanzos diz,

Setembro 30, 2009 @ 1:01 am

Opa, e se eu quiser que isso funcione apenas em alguns links, será que tem como?
Tipo, eu pensei em fazer isso usando classe, + - assim?

.classe_icone a[href$=’.doc’] { padding:0 20px 0 0; background:transparent url(/imagens/icones/word.gif) no-repeat center right; }

Tentei isso mas não deu certo! =(

Thiago Bettanzos diz,

Setembro 30, 2009 @ 1:13 am

descobri como fazê-lo nesse site:

http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html

Abraços

Mauro George diz,

Novembro 18, 2009 @ 4:16 pm

Vale ressaltar que são seletores CSS 3, e se em seu projeto tiver que ter compatibilidade com o I.E 6 infelizmente não funcionara.

Everton Melo diz,

Janeiro 12, 2010 @ 10:38 am

Caso queira fazer em uma URL específica usando “class”:

a[class =”nomeDaClasse”] {
padding-right: 20px;
background: transparent url(icon_class.gif) no-repeat center right;
}

Assinar feed RSS de comentários neste post · TrackBack URI

Deixe seu comentário

Fechar
Envie por e-mail