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

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

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

Carlos L. A. da Silva - 15 de fevereiro de 2019

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

Como salvar seus dados do Google Plus
Dicas
9 visualizações
Dicas
9 visualizações

Como salvar seus dados do Google Plus

Carlos L. A. da Silva - 15 de fevereiro de 2019

Com o fim anunciado, você tem até primeiro de Abril para resgatar tudo que publicou na rede social.

Reagindo a Vagas de Emprego para Programadores // Vlog React #89
Vídeos
1,655 compartilhamentos6,808 visualizações
Vídeos
1,655 compartilhamentos6,808 visualizações

Reagindo a Vagas de Emprego para Programadores // Vlog React #89

Thais Cardoso de Mello - 14 de fevereiro de 2019

Decidimos mostrar algumas vagas de trabalho para programadores e vamos comprovar se as empresas estão realmente loucas pedindo coisas demais nos perfis profissionais.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Manifesto Ágil: Tipos de demanda e classes de serviço
Artigos
11 visualizações
11 visualizações

Manifesto Ágil: Tipos de demanda e classes de serviço

Plataformatec - 12 de fevereiro de 2019
Mark Zuckerberg conseguiu destruir o Google Plus
Artigos
13 visualizações
13 visualizações

Mark Zuckerberg conseguiu destruir o Google Plus

Carlos L. A. da Silva - 11 de fevereiro de 2019
W3C // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,812 visualizações
1,655 compartilhamentos6,812 visualizações

W3C // Dicionário do Programador

Thais Cardoso de Mello - 11 de fevereiro de 2019
Promoções de Jogos do Final de Semana (08/02)
Notícias
20 visualizações
20 visualizações

Promoções de Jogos do Final de Semana (08/02)

Carlos L. A. da Silva - 8 de fevereiro de 2019