· · 3

Ícones, Background e CSS

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 padding 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. 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 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 em si 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. 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.

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 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. Pessoalmente, mantenho snippets semelhantes a estes no meu arquivo CSS base quando inicio um novo projeto.

Topo

3 Comentários

  1. 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!

  2. 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.

  3. Gravatar
    Amanda Rios Ulitska

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

Comente