0 Compartilhamentos 71 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

De volta aos anos 80!
Artigos
3 visualizações
Artigos
3 visualizações

De volta aos anos 80!

Carlos L. A. da Silva - 22 de julho de 2019

Stranger Things puxou a nostalgia e a Microsoft entrou na brincadeira. Mas como era a tecnologia da informação naquela época?

Promoções de Jogos do Final de Semana (19/07)
Notícias
23 visualizações
Notícias
23 visualizações

Promoções de Jogos do Final de Semana (19/07)

Carlos L. A. da Silva - 19 de julho de 2019

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

Como ativar o DNS-over-HTTPS (DoH) no Firefox
Dicas
15 visualizações
Dicas
15 visualizações

Como ativar o DNS-over-HTTPS (DoH) no Firefox

Carlos L. A. da Silva - 18 de julho de 2019

Protocolo aumenta a segurança da navegação de seus dados e navegador da Mozilla por enquanto é o único com suporte oficial.

Mais publicações

SEO // Dicionário do Programador
Vídeos
18 visualizações
18 visualizações

SEO // Dicionário do Programador

Thais Cardoso de Mello - 15 de julho de 2019
Promoções de Jogos do Final de Semana (12/07)
Notícias
19 visualizações
19 visualizações

Promoções de Jogos do Final de Semana (12/07)

Carlos L. A. da Silva - 12 de julho de 2019