Gerador de Sprites CSS
Categorias

Como adicionar ícones por tipo de arquivo usando apenas CSS

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:

Arquivo de vídeo
Arquivo de texto

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:

 body {
/* estilo visual opcional */
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "Trebuchet MS", sans-serif;
  font-size: 12px;
}

.arquivo {
  display: inline-block;
  margin: 1.5em 2.5em;
  position: relative;
  padding-left: 45px;
  color: black;
  text-decoration:none;
}
.arquivo::before {
/* aqui começa a mágica: vamos criar a caixa de nosso "ícone" */
  position: absolute;
  width: 29px;
  height: 34px;
  left: 0;
  top: -7px;
  content: '';
  border: solid 2px #999;
}
.arquivo::after {
/* aqui vamos recuperar a informação do  data-filetype e preencher nossa descrição do "ícone" */
  content: 'file';
  content: attr(data-filetype);
  left: -4px;
  padding: 0px 2px;
  text-align: right;
  line-height: 1.3;
  position: absolute;
  background-color: #000;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  top: 9px;
}

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:

Arquivo de vídeo
Arquivo de texto
 body {
/* estilo visual opcional */
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "Trebuchet MS", sans-serif;
  font-size: 12px;
}

.arquivo {
  display: inline-block;
  margin: 1.5em 2.5em;
  position: relative;
  padding-left: 45px;
  color: black;
  text-decoration:none;
}
.arquivo::before {
/* aqui começa a mágica: vamos criar a caixa de nosso "ícone" */
  position: absolute;
  width: 29px;
  height: 34px;
  left: 0;
  top: -7px;
  content: '';
  border: solid 2px #999;
}
.arquivo::after {
/* aqui vamos recuperar a informação do  data-filetype e preencher nossa descrição do "ícone" */
  content: 'file';
  content: attr(data-filetype);
  left: -4px;
  padding: 0px 2px;
  text-align: right;
  line-height: 1.3;
  position: absolute;
  background-color: #000;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  top: 9px;
}
.arquivo .cantinho {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 0 11px;
  border-color: white transparent transparent #999;
  position: absolute;
  top: -7px;
  left: 22px;
}

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: