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

Como baixar o novo Windows Terminal
Dicas
8 visualizações
Dicas
8 visualizações

Como baixar o novo Windows Terminal

Carlos L. A. da Silva - 26 de junho de 2019

Ferramenta foi turbinada e já está disponível em versão de prévia para usuários do window

Libra: o que sabemos sobre a criptomoeda do Facebook
Artigos
7 visualizações
Artigos
7 visualizações

Libra: o que sabemos sobre a criptomoeda do Facebook

Carlos L. A. da Silva - 25 de junho de 2019

O anúncio oficial do Libra promete um futuro surpreendente para a maior rede social do mundo.

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

WebAssembly // Dicionário do Programador

Thais Cardoso de Mello - 24 de junho de 2019

Quer descobrir o que está por trás dessa tecnologia que já chega achando que pode sentar na janela do desenvolvimento web? Assista esse episódio e descubra!

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (21/06)
Notícias
8 visualizações
8 visualizações

Promoções de Jogos do Final de Semana (21/06)

Carlos L. A. da Silva - 21 de junho de 2019
Histórias do Hotmail
Artigos
9 visualizações
9 visualizações

Histórias do Hotmail

Carlos L. A. da Silva - 21 de junho de 2019
Top 5 linguagens de programação para IA e Machine Learning
Vídeos
7 visualizações
7 visualizações

Top 5 linguagens de programação para IA e Machine Learning

Thais Cardoso de Mello - 20 de junho de 2019
8 jogos que foram cancelados para surgirem jogos diferentes
Artigos
7 visualizações
7 visualizações

8 jogos que foram cancelados para surgirem jogos diferentes

Carlos L. A. da Silva - 17 de junho de 2019