Reciclagem e animação de ícones com CSS
No passado não muito distante, estávamos aprendendo sobre técnicas revolucionárias para salvar solicitações HTTP e KBs através do uso de sprites de imagem. Esses sprites consistiam em dezenas ou até centenas de ícones organizados em um arquivo de imagem que depois era dividido e exibido de várias formas em um site.
Fizemos bom uso da técnica e praticamente todos os sites preocupados com a escalabilidade a empregam.
Graças ao advento das propriedades de Transformação e Transição do CSS3, podemos levar isso um passo adiante e, usando algumas linhas concisas de código, transformar modelos de ícone base em novos ícones para uso futuro - e até lançar animação na mistura para um bônus adicional !
A técnica é tão simples e intuitiva quanto os sprites de imagem, e permite o uso para implantar rapidamente novos ícones sem ter que alterar os sprites da imagem.
Reciclagem de ícones com CSS
Dê uma olhada neste sprite retirado da biblioteca da interface do usuário do jQuery. À medida que você navega, perceberá que muitos dos ícones listados aqui são na verdade variações de modelos base. Um único ícone pode ser representado em uma dúzia de maneiras diferentes e colocado no mesmo arquivo. Muitos ícones são literalmente apenas versões rodadas de seus pais. A boa notícia é que, ao utilizar o CSS, podemos empregar exatamente a mesma técnica sem precisar incluir as variações no sprite da imagem.
Pelo exemplo acima, podemos pegar um único ícone e recriá-lo para nossos próprios propósitos, digamos, uma simples divisa da segunda fileira para baixo. Com a propriedade transform, podemos girar essa divisa 45deg, 90deg, 180deg, obviamente e indefinidamente para criar diversas formas diferentes a partir do mesmo modelo.
Modelo base (seta para cima):
O código a seguir puxará a chevron voltada para cima a partir do sprite da imagem e servirá como nosso modelo base.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Criar um arrio certo
Transformando nossa seta 90deg irá apontar a seta para a direita, como mostra abaixo:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Criar seta na parte superior direita
Gire apenas 45 graus e você terá uma pequena seta de canto superior direito:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
É simples assim. Usando esse método, podemos começar com um simples sprite de dois ícones e, com muito pouco esforço, criar seis vezes mais ícones para usar em nossa interface, o que, obviamente, é apenas o começo do que pode ser feito.
Algumas transformações, algum posicionamento sofisticado e nossa família de ícones cresceu bastante!
Adicionando animação ao mix
Para uma experiência matadora, podemos adicionar animação à mistura. Não apenas transformaremos os ícones, mas os transformaremos para tornar a transformação visível para o usuário. Vamos dar uma olhada em outro exemplo, começando com o sinal de mais visto acima.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Uma rotação fácil de 45deg irá transformar o nosso ícone plus em um prático ícone de fechamento.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Agora que nossa transformação está funcionando corretamente, podemos adicionar uma transição ao mix. Imagine que você tenha um recurso em seu site para compartilhar a página atual por meio de várias redes sociais. Clicar no ícone de adição abrirá a lista de opções de compartilhamento e, enquanto a lista está sendo aberta, o sinal de adição transita para um ícone de fechamento por meio de uma animação sutil. A melhor implementação que encontrei para isso é no aplicativo para iPad da FontBook. Confira sua implementação:
É estelar. Vamos dar uma olhada em como fazer essa beleza ganhar vida. Comece usando nosso ícone de adição criado acima. Para animá-lo, basta adicionar a propriedade de transição ao seu ícone. Em nossa transição, especificamos a propriedade (transform), a duração (0.2s) e, finalmente, qual função de temporização queremos usar (linear).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Mais uma vez, é simples assim. Não apenas podemos criar novos ícones para nossa biblioteca com apenas CSS, como também podemos animar e dar vida a qualquer elemento em particular!
Usando a opacidade para mais variedade
A peça final de reciclagem de ícones vem a ser jogada na forma da propriedade de opacidade. A duplicação de seus ícones principais para preto e branco permitirá gerar um número infinito de sombras / variantes para uso em todo o site ou aplicativo.
Uma variante de quatro imagens (como visto abaixo) do sprite acima pode ser facilmente usada para criar uma dúzia de vezes mais ícones, e aumentando ou diminuindo a opacidade você pode colocá-los onde for necessário, e ainda assim eles ficam ótimos.
É hora de ir verde: reciclar com CSS
Como o CSS3 ganhou força, minha cópia do Photoshop CS5 começou a ganhar poeira e por um bom motivo! Essa técnica de reciclar seus ícones permite implantar continuamente novas versões e variantes em suas interfaces sem precisar abrir arquivos de origem e adicionar ícones incômodos a sprites em constante expansão.
O tempo de manutenção diminui e seu tempo gasto lendo livros como a Semana de Trabalho de 4 Horas sobe! Tudo é ouro.
É claro que a desvantagem mais óbvia para tudo isso é o suporte a navegadores, no entanto, com o recente impulso de, bem, todos usarem navegadores modernos, poderemos tirar vantagem de novas e excitantes técnicas progressivas. Sinta-se livre para procure alguns exemplos desta técnica.
Quais são algumas outras maneiras pelas quais você conseguiu reciclar os recursos do seu website?