0 Compartilhamentos 63 Views

Como adicionar ícones por tipo de arquivo usando apenas CSS

25 de janeiro de 2019

Muitos usuários ainda se surpreendem quando clicam em um link e aparece uma mensagem de download ou quando aparece uma janela de vídeo ocupando a tela inteira do navegador. É uma boa prática de experiência de usuário alertar sobre o tipo de arquivo para o qual ele está sendo direcionado, nem que seja com uma explicação entre parênteses (“PDF”, por exemplo).

Uma solução mais elegante pode ser utilizada combinando JavaScript e HTML para exibir um ícone do tipo de arquivo ou o webmaster pode até mesmo marcar o conteúdo manualmente caso a caso, usando imagens.

Entretanto, esse tipo de alerta também pode ser obtido usando apenas CSS, sem imagens, sem JavaScript. Esse truque é possível utilizando data attributes na tag <a> dos links e recuperando esse conteúdo através do CSS usando a propriedade content. Esse conteúdo pode ser adicionado ao HTML da página com os pseudo-elementos :after :before.

Veja como o HTML poderia ser montado na página:

Perceba que o tipo de arquivo precisa ser especificado no código-fonte e não é recuperado dinamicamente nessa solução.

Até aqui, o resultado não é ainda o que estávamos esperando:

Para exibir essa informação na tela, entra em cena o CSS:

O resultado já está mais próximo do que desejamos e já serviria para informar o usuário sobre o formato de arquivo ao qual o link se refere:

Entretanto, podemos melhorar ainda mais esse “ícone” de arquivo acrescentando um dobradura no canto, simulando um papel. Isso é possível adicionando um span ao HTML e uma classe adicional no CSS. Confira como fica o código final:

O resultado final injeta um “ícone” de arquivo, ajudando o usuário a visualizar que tipo de conteúdo estará disponível ao se clicar no link:

Você pode se interessar

TypeScript // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,807 visualizações
Vídeos
1,655 compartilhamentos6,807 visualizações

TypeScript // Dicionário do Programador

Thais Cardoso de Mello - 18 de março de 2019

TypeScript é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

Promoções de Jogos do Final de Semana (15/03)
Notícias
9 visualizações
Notícias
9 visualizações

Promoções de Jogos do Final de Semana (15/03)

Carlos L. A. da Silva - 15 de março de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista
Vídeos
1,655 compartilhamentos6,812 visualizações
Vídeos
1,655 compartilhamentos6,812 visualizações

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista

Thais Cardoso de Mello - 14 de março de 2019

Batemos um papo muito divertido e informativo com o Igor Oliveira (do canal Programador BR).

Deixe um Comentário

Your email address will not be published.

Mais publicações

World Wide Web completa 30 anos!
Notícias
12 visualizações
12 visualizações

World Wide Web completa 30 anos!

Carlos L. A. da Silva - 12 de março de 2019
Ada Lovelace: o cérebro que nunca morre
Artigos
133 visualizações1
133 visualizações1

Ada Lovelace: o cérebro que nunca morre

Carlos L. A. da Silva - 12 de março de 2019
Scrum // Dicionário do Programador
Vídeos
14 visualizações
14 visualizações

Scrum // Dicionário do Programador

Thais Cardoso de Mello - 11 de março de 2019