Estilização: Transições Suaves Usando Apenas CSS

Pouco tempo atrás houve um boom de jQuery na internet. Pra quem não sabe, é uma biblioteca JavaScript que facilita muito a vida dos web designers, permitindo desenvolver soluções e estilizações sem problemas de compatibilidade entre navegadores.

Muitos sugeriam códigos para aplicar transições suaves de cor de fundo, links e divs, coisa facilmente alcançável com poucas linhas de CSS. A questão é que os navegadores ainda não estavam bem preparados para essas regras. Uma estilização que funcionava no Firefox poderia não mostrar nada no Opera, por exemplo.

Agora a coisa mudou; quase todos trabalham bem com CSS3 e muitas vezes não é preciso usar jQuery. Vamos ver um código simples para aplicar transições em elementos mais comuns, como links e divs com efeito hover. Sabendo como fazer, você pode estilizar outros elementos, como menus de navegação.

Código básico

O básico para criar as transições será o uso do transition, com ease. Essa propriedade é lidas sem problema pelos principais navegadores - exceto Internet Explorer, pelo menos por enquanto. Para essa compatibilidade, crie uma regra que atenda a todos: webkit, moz, o e a propriedade básica. Veja um exemplo de regras comentadas.

elemento {
-webkit-transition: 0.3s ease-in; // navegadores webkit, como Safari e Chrome
-moz-transition: 0.3s ease-in; // Firefox
-o-transition: 0.3s ease-in; // Opera
}

Como dá pra ver, é simples: propriedade transição, com 0.3 segundo de duração, e com uma "desaceleração" no início da transição. Ou seja, ela começa suavemente e termina mais depressa.

Aplicando em links

Fazer um link mudar de cor ou tamanho quando passamos o mouse é coisa simples. Qualquer curso elementar de HTML ensina isso. Pra quem não lembra, é isso:

a {
color: #ff0000 // ou seja, links vermelhos
}

a:hover {
color: #fff // ficarão brancos ao passar o mouse.
}

Exemplo desse link funcionando, passe o mouse aqui.

Agora, vamos usar o transition para suavizar a mudança de cor.

a {
color: #ff0000;
-webkit-transition: 0.3s ease-in;
-moz-transition: 0.3s ease-in;
-o-transition: 0.3s ease-in
}

a:hover {
color: #fff;
-webkit-transition: 0.3s ease-in;
-moz-transition: 0.3s ease-in; 
-o-transition: 0.3s ease-in
}

Agora, o link com as novas regras. Passe o mouse aqui.

Funciona para outras mudanças do link, como a cor de fundo (background-color). Veja o exemplo:

Passe o mouse

A lista de propriedades com valores que podem ser alterados por transition é grande. Quase tudo, incluindo cores, valores integrais como posicionamento e tamanho pode ser alterado. Uma exceção notável são as box-shadow.

A lista completa:

Transition em divs

Mais um exemplo, agora alterando a cor de fundo, largura e a cor do texto dentro da div com a classe "mudacor".

CSS para a div normal:

.mudacor {
background-color: #ff4b33; //cor de fundo da div
color: #fff; // cor do texto dentro da div
width:50%; //largura da div
height: 30px //altura da div
}
.mudacor:hover {
background-color: #fff;
color: #000;
width:70%; //largura da div
}

Estilo da div acima, mas com transition:

.mudacor {
background-color: #ff4b33; //cor de fundo da div
color: #fff; // cor do texto dentro da div
width:50%; //largura da div
height: 30px; //altura da div
-webkit-transition: 0.8s linear; 
-moz-transition: 0.8s linear; 
-o-transition: 0.8s linear
}
.mudacor:hover {
background-color: #fff;
color: #000;
width:70%; //largura da div
-webkit-transition: 0.3s linear; 
-moz-transition: 0.3s linear; 
-o-transition: 0.3s linear
}

E o resultado. Note que a alteração é mais lenta ao voltar ao normal, porque usei 0.8s na classe padrão, e 0.3 na classe com hover (ou seja: no "hover", a transformação é mais rápida).

NOTA: se você está acessando esta página com o Internet Explorer, já deve ter notado que as regras não funcionaram. Você deveria considerar a possibilidade de trocar de navegador. Veja algumas razões porque eu detesto Internet Explorer.

Para saber mais, leia os links abaixo. Eles são boas referências para aprofundar o tema das transitions, mas os exemplos mostrados aqui com ease e linear já sejam suficientes para aplicar em algumas páginas.

• W3Schools - CSS3 Transitions (em inglês)
• Maujor - CSS3 - Módulo Transitions
• W3Org - CSS3 Transition (em inglês)
• WebDesigner Depot - CSS Transitions 101 (em inglês)

Leia também...

• 

  Estampas de camisetas com carimbo – por Aaron von Freter

  Todo mundo adora camiseta, e se ela tiver uma estampa legal e bem feita, melhor ainda. Se você produz as suas mas já cansou de tentar técnicas tradicionais de silk ou com máquinas, veja essa do designer americano baseado na europa, Aaron von Freter. Com mais de 12 de experiência no ramo de vestuário, ele inovou alguns anos atrás com esse processo de carimbar - o mesmo dos velhos carimbos de borracha.

  Cada estampa acaba tendo um estilo próprio, variando de acordo com a quantidade de tinta e pressão exercida. Fica ao mesmo tempo rústico e estiloso. Quem sabe é uma inspiração pra você desenvolver algo similar.

• 

  Como criar transição (fade) com CSS no carregamento da página e imagens

  Quem aí trabalhava ou brincava com design web na primeira metade dos anos 2000? Lembram como era feito pra conseguir um botão ou imagem com efeito de transição, tipo ir aparecendo aos poucos, ou mudando de cor? Normalmente eram duas abordagens: uma com Javascript e a outra - mais fácil e menos indicada - era apelar pro Flash. Mais recentemente surgiram vários meios de fazer isso com jQuery.

  Mas felizmente, com a modernização dos navegadores, mais recursos e propriedades de CSS vão se tornando compatíveis num ambiente mais amplo, e dá pra conseguir quase tudo só com CSS. Vamos ver dois exemplos da regra keyframes (quadros-chave) pra criar animações simples, completas pela propriedade animation. Com opacity vamos "esconder" os elementos durante o carregamento, aparecendo aos poucos.

• 

  Cartazes Oficiais das 12 Sedes da Copa do Mundo 2014

  Foram divulgados os cartazes oficiais das sedes na Copa do Mundo Brasil 2014. Alguns foram escolhidos por comissões formadas por designers e membros da FIFA e do governo, outros através de votação popular pela internet.

  Como era esperado, muita gente já está batendo o pé e reclamando da baixa qualidade de um e outro. Apesar de não concordar com as críticas feitas antes ao mascote (que teve o infeliz nome de Fuleco escolhido também por votação popular), concordo que não foi um trabalho muito compacto. Temos ótimos cartazes e outros bem inexpressivos.

  Pra falar a verdade, não curto a ideia de votação popular nesses casos, acho que é uma forma de fugir da responsabilidade de uma escolha que depois pudesse ser criticada. Uma boa equipe profissional deveria ser incumbida, num processo bem claro, mas enfim... Se até no logo oficial já houve tanta confusão...

  Seja como for, aí estão eles. Confira e opine.