· · 6

Ícones, Background e CSS

Torne-se um profissional web freelancer

Novo curso: Seja um freelancer!
Clique aqui para mais informações

Neste tutorial irei mostrar uma forma de combinar ícones com classes CSS reutilizáveis para uso em interfaces variadas. Pessoalmente, utilizo estas técnicas nas minhas interfaces administrativas, entre outras situações.

Para este tutorial estarei utilizando o famoso iconset Silk do site famfamfam.com.

Download dos Arquivos de Exemplo

Combinando Classes CSS

Você sabia que podemos combinar classes CSS umas com as outras? Apesar de ser algo óbvio para muita gente, vários web designers ainda não utilizam as vantagens desta técnica.

Além da combinação de classes, iremos usar também o seletor de atributo [], que permite selecionar qualquer atributo de uma tag HTML.

Vamos começar com um link de exemplo abaixo:

<a class="icone" href="arquivo.pdf">Download do PDF</a>

Podemos colocar um ícone de arquivo PDF do nosso banco de ícones com o seguinte código CSS:

.icone {
    padding-left: 22px;
    background: url(acrobat.png) no-repeat left center;
    text-decoration: none;
}

Veja o resultado aqui

Utilizando a propriedade background e um pouco de padding, conseguimos o efeito desejado. Porém, existem formas de transformar isso em um sistema reutilizável e mais flexível.

Vamos utilizar a seguinte lista de links como exemplo:

<ul>
    <li>
        <a class="icone pdf" href="arquivo.pdf">Download do PDF</a>
    </li>
    <li>
        <a class="icone doc" href="arquivo.doc">Download do arquivo Word</a>
    </li>
    <li>
        <a class="icone xls" href="arquivo.xls">Download do arquivo Excel</a>
    </li>
</ul>

Combinando a classe "icone" com outras, como pdf ou doc, criamos um pequeno e simples sistema de classes reutilizáveis. Veja o código CSS:

.icone {
    padding-left: 22px;
    background: no-repeat left center;
    text-decoration: none;
}

.icone.pdf {
    background-image: url(acrobat.png);
}

.icone.doc {
    background-image: url(page_white_word.png);
}

.icone.xls {
    background-image: url(page_white_excel.png);
}

Veja o resultado aqui

E se quisermos utilizar os links fora de uma lista? Podemos usar inline-block na propriedade display, que faz com que os links se comportem como bloco, porém sem perder a formatação em linha, assim respeitando corretamente margens e paddings sem a necessidade de se utilizar flutuação. Código abaixo:

.icone {
    padding-left: 22px;
    background: no-repeat left center;
    text-decoration: none;
    display: inline-block;
    margin-right: 1em;
}

Veja o resultado aqui.

Utilizando as vantagens da combinação de classes, podemos também criar uma classe "esconde-texto", para que possamos trabalhar apenas com os ícones, apenas adicionando uma classe e sem mudar mais nada no markup. Código HTML:

<a href="arquivo.pdf">Download do PDF</a>
<a href="arquivo.doc">Download do arquivo Word</a>
<a href="arquivo.xls">Download do arquivo Excel</a>

E código CSS:

.icone {
    padding-left: 22px;
    background: no-repeat left center;
    text-decoration: none;
    display: inline-block;
    margin-right: 1em;
    min-height: 16px; /* altura dos ícones */
}

.esconde-texto {
    width: 16px;
    height: 16px;
    overflow: hidden;
    text-indent: -9000px;
    padding: 0;
}

Veja o resultado aqui

Selecionando atributos

Por fim, uma alternativa é é utilizar o seletor de atributo [] para deixarmos o código ainda mais limpo. Os seletores de atributo da CSS2 possuem suporte amplo nos navegadores (exceto IE6, é claro) mas, aqui, irei usar um específico de CSS3. Portanto, é necessário verificar o suporte para os principais navegadores e se essa técnica poderia ser utilizada no seu caso. Com o seletor [$=] conseguimos verificar se o valor de um atributo termina com determinada sequência de caracteres. Ou seja, conseguimos detectar a extensão do arquivo que está sendo indicado em um link, por exemplo.

Código HTML:

<a href="arquivo.pdf">Download do PDF</a>
<a href="arquivo.doc">Download do arquivo Word</a>
<a href="arquivo.xls">Download do arquivo Excel</a>

E código CSS:

.icone[href$='.pdf'] {
    background-image: url(acrobat.png);
}

.icone[href$='.doc'] {
    background-image: url(page_white_word.png);
}

.icone[href$='.xls'] {
    background-image: url(page_white_excel.png);
}

Veja o exemplo final da técnica aqui.

Concluindo, a combinação de classes CSS traz muita flexibilidade para o desenvolvimento de interfaces. Como há muita reutilização de elementos, entre links, botões, menus e outros, este tipo de técnica economiza tempo e deixa o site mais fácil de manter. Inclusive, é algo portátil e que pode ser transportado facilmente para outros sites.

Torne-se um profissional web freelancer

Novo curso: Seja um freelancer!
Clique aqui para mais informações


6 Comentários

  1. Gravatar

    Gostaria de saber como é feito para a div que fica a minha direita desse link http://guilhermemuller.com.br/pt/posts/6/icones-background-e-css#

    como ela desaparece quando chega no top.

    1. Gravatar Guilherme Müller

      Olá Brendon,

      Para isso, usei apenas um pouco de JavaScript e jQuery. Usando o evento scroll() (jQuery) do elemento window, você consegue avaliar se a rolagem da janela é igual a zero. Se for igual a zero, oculta-se o link "topo". Caso contrário, este é mostrado.

  2. Gravatar
    Ademir Ferreira

    Parabéns!!!

    Conteúdo claro, objetivo e funcional.

  3. Gravatar
    Amanda Rios Ulitska

    Conteúdo de excelente qualidade! Bem explicado! Parabéns!

  4. Gravatar
    Luciano Felix

    cara, to apredendo muita coisa aqui no seu site, muita mesmo!

    1. Gravatar Guilherme Müller

      Obrigado! Se tiver sugestões de outros tópicos que deseja ver aqui no site, me avise.

  5. Gravatar
    renato bruno

    Manolo, é dificil algo que me faça comentar um post, mas simplismente, não posso deixa-lo sem meu comentário...
    Simplesmente me surpreendi com seu blog...
    Conteúdos realmente estudados, é difícil encontrar blogs sobre WebSite (sua confecção) com essa qualidade de Conteúdo. Parabéns..
    Meu sinceros Parabéns..

    1. Gravatar Guilherme Müller

      Muito obrigado, fico feliz que tenha ajudado. Aguarde novos posts com mais técnicas úteis!