Criando aplicativos HTML5
Efeitos, transições e animações do CSS3
Como desenvolvedor da Web, você tem três ferramentas que pode usar para tornar realidade a sua visão: HTML, CSS e JavaScript. Mas nem sempre foi assim. No passado, efeitos aparentemente simples, como sombras de texto ou gradientes o mandavam para editores de imagem diferentes em vez de usar CSS e HTML. E embora você tivesse JavaScript, tornar o aplicativo Web fluido e vivo normalmente necessitava de quantidades consideráveis de codificação. Essas técnicas não apenas complicavam a criação do aplicativo inicialmente, mas qualquer alteração pequena era dispendiosa.
Felizmente, o CSS3 e o HTML5 eliminam a necessidade da ginástica da imagem e do JavaScript de antigamente. Você pode criar interações suaves e lindas experiências com marcação declarativa simples.
Agora, se você for como eu, deve ter acabado de dar uma risadinha. Só porque é CSS e HTML não significa que é simples. Mas como verá, aprendendo algumas novas propriedades do CSS e testando-as em algumas demonstrações legais, você economizará horas incontáveis de desenvolvimento, não mencionando as horas gastas em negociação com seu cliente sobre a necessidade de um efeito específico.
Sombras
Vamos começar bem simples e dar uma olhada em alguns efeitos de sombreamento básicos. Para mim, efeitos dizem respeito a alterar a percepção de um objeto. Por exemplo, dê uma olhada na sombra do texto e nas sombras das caixas na Figura 1.
.jpg)
Figura 1 Efeitos de sombra
O efeito fornece a ilusão de uma fonte luminosa direcional atingindo o objeto e do objeto, por sua vez, lançando uma sombra nos objetos em volta dele. Isso ajuda a dar a percepção de profundidade e alguns até diriam que ajuda o objeto a parecer que está flutuando.
Adicionar uma sombra não é difícil, então vamos adicionar uma sombra de texto a um cabeçalho:
h1 {
text-shadow: black 2px 2px 12px 2px;
}
Estas são as diferentes propriedades da sombra de texto:
- Cor da sombra (opcional). Você pode especificar uma cor pelo nome ou pode usar designações de cor HSL ou RGBA.
- Deslocamento horizontal (obrigatório). Isso indica a posição horizontal da sombra. Valores positivos movem a sombra para a direita do objeto; valores negativos a movem para a esquerda.
- Deslocamento vertical (obrigatório). Isso define a posição vertical da sombra. Valores positivos movem a sombra para a parte inferior; valores negativos a movem para a parte superior.
- Raio de desfoque. Esse valor define a clareza com que o texto da sombra irá aparecer. 0px é a própria fonte; aumentar os valores desfoca cada vez mais a borda do objeto. Valores negativos não são permitidos.
- Distância de espalhamento. Esse valor define a distância de afastamento da sombra, como a forma da sombra se expande para fora (um valor positivo) ou se contrai para dentro (um valor negativo).
Sombras de caixas funcionam da mesma maneira que sombras de texto e têm os mesmos parâmetros:
box-shadow: red 10px 10px 0px 0px;
As sombras são muito comuns. São usadas em elementos como botões para fornecer profundidade e para dar aos usuários uma ideia do propósito do elemento. Elas ajudam a apontar para o usuário o fato de que um determinado objeto é de alguma maneira diferente de outros objetos visíveis na interface do usuário. Antigamente, você iria provavelmente para o Photoshop e criaria PNGs para representar botões; agora, você pode fazer isso na marcação. Certamente, estou apenas abordando superficialmente aqui. Você pode criar muitos outros efeitos notáveis ajustando a opacidade, o raio da borda, gradientes, a tipografia e assim por diante.
Transformações
A propriedade de transformação do CSS permite transformar um determinado elemento em termos de tamanho ou espaço. Para demonstrar, vamos definir uma imagem de modo que quando um usuário passar o mouse sobre ela, a imagem se tornará duas vezes maior:
#myImg:hover {
transform: scale(2);
}
Certamente isso é CSS, o que significa que você realmente precisa incluir qualquer prefixo de fornecedor aplicável. Irei omiti-los pelo resto do artigo, mas a transformação anterior deveria ser parecida com isso:
#myImg:hover {
-ms-transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o- transform: scale(2);
transform: scale(2);
}
Você também pode aproveitar a detecção de recursos. Na verdade essa é uma das práticas mais importantes a implementar em seus sites hoje. Em vez de basear o comportamento do site em agentes do usuário, você deve aproveitar uma ferramenta como o Modernizr (modernizr.com), que permite perguntar ao navegador sobre seus recursos. Se o navegador de um usuário não der suporte a um determinado recurso necessário, em vez disso será possível usar um suporte retroativo, um shim que implementa o recurso para o navegador. Isso é possível mesmo para o CSS. Para obter mais informações, confira “Nenhum navegador ficará para trás: uma estratégia de adoção do HTML5” em msdn.microsoft.com/magazine/hh394148. Agora, de volta às transformações.
Além de dimensionar, também é possível aplicar transformações em um plano 2D ou 3D. Com 2D, você está movimentando um elemento ao longo de seus eixos X e Y. Vamos pegar um texto e girá-lo 45 graus.
.transform2d {
transform: translate(0px, 0px)
rotate(45deg)
scale(1.45)
skew(0deg, 0deg);
}
A Figura 2 mostra uma caixa que foi girada 45 graus.
.png)
Figura 2 Transformando um elemento no espaço 2D
Bem, 2D é ótimo, mas claramente 3D é a moda hoje. Não queremos mesmo pedir a nossos usuários que coloquem óculos especiais, mas queremos que as pessoas pensem que nossas caixas estão para sair da tela. Este é o código para fazer isso:
.transform3d {
transform-origin-x: 50%;
transform-origin-y: 50%;
transform: perspective(110px) rotateY(45deg);
}
Os resultados são mostrados na Figura 3.
.png)
Figura 3 Uma transformação 3D
Transições
Agora vamos explorar as transições, que permitem alterar um elemento de um estilo ou estado para outro. Começarei com a pseudoclasse hover. Historicamente usamos CSS para definir os estados de um elemento, como seu estado inicial e seu estado após um evento. Os elementos de botões e links de âncora têm dois estados, o estado inicial e o estado de passagem de mouse. Quando um usuário ativa o estado de passagem de mouse, estas propriedades são definidas. Este é um exemplo rápido para passar o mouse sobre um botão:
#boxTrans:hover {
background-color: #808080;
color: white;
border-color: #4cff00;
border-width: 3px;
}
Coisa padrão e nenhuma dúvida que já fizemos isso antes. Os navegadores atuais são tão rápidos que a transição de estado é quase instantânea. Isso é ótimo de uma perspectiva do desempenho, mas isso apresenta um novo problema. Em alguns casos, essa alteração de estado pode ser brusca ou mesmo não visível. É inteiramente possível que o usuário nunca veja essa alteração rápida e sutil.
Com as transições do CSS3, você pode gerenciar o tempo que uma transição leva para ocorrer e também controlar outros aspectos da transição. Por exemplo, em vez de um botão apenas alterar automaticamente sua cor do plano de fundo, agora você pode especificar o que deve acontecer durante essa alteração.
Adicionar uma transição CSS é fácil: você adiciona os comandos de transição ao elemento básico. Como exemplo, vamos criar uma caixa simples com algum texto nela. Quando o usuário passa o mouse sobre essa caixa, a cor do plano de fundo, o texto e a borda devem mudar:
#boxTrans {
...
transition: all .5s linear;
...
}
#boxTrans:hover {
background-color: #808080;
color: red;
border-color: green;
}
Como pode ser visto, defini a transição no elemento #boxTrans. Estou escolhendo fazer a transição de todas as propriedades desse elemento, e quero que todas façam a transição linearmente (isto é, a uma velocidade constante) ao longo de .5 s. Também posso escolher propriedades específicas para fazer a transição indicando somente essas propriedades da seguinte maneira:
transition: background-color .5s linear;
Animações
Diferente das transições, em que você informa ao navegador os estados inicial e final, com as animações você especifica uma série de propriedades de CSS por um determinado período de tempo. Na realidade, as animações são simplesmente extensões de transições. Para criar uma animação você usa um quadro chave. Pense no quadro chave como o estado de um item em um determinado momento dentro da duração definida para a animação total. Vamos criar uma animação simples, uma pequena caixa que rola para a frente e para trás. Primeiro, definirei o elemento:
<html>
...
<div class="box" id="boxAnimation"></div>
...
</html>
Vamos dar um pouco de estilo ao div boxAnimation para que se pareça com uma caixa:
<style>
...
.box {
border: 1px solid black;
background-color: red;
width: 25px;
height: 25px;
position: relative;
}
...
</style>
Feito isso, definirei a animação básica. Preciso definir o quadro chave da animação e sua duração. Se você não definir a propriedade duration, a animação nunca será executada, pois o padrão é 0. Também definirei o número de iterações que espero que a animação execute; aqui, quero que ela seja executada 10 vezes por 5 segundos cada (se preferir, poderá definir a contagem de iterações da animação como infinito, o que fará com que a animação seja executada enquanto a página estiver aberta):
#boxAnimation {
animation: 'not-knight-rider';
animation-duration: 5s;
animation-iteration-count: 10;
}
Por último, preciso definir o próprio quadro chave. Começarei com um simples quadro chave que moverá a caixa pela tela. Para fazer isso defino as propriedades to e from e deixo o navegador tomar conta do resto:
@keyframes not-knight-rider {
from {
left: -100px;
}
to {
left: 100px;
}
}
Se isso for executado, você verá uma caixa vermelha que flutua pela tela e então se repete. Como mencionei, você tem o controle total da animação. Vamos atualizar esse quadro chave para realmente controlar onde a caixa está, em que momento e o que está exatamente fazendo, como mostrado na Figura 4.
Figura 4 Controlando a animação
@keyframes not-knight-rider {
from {
left: -100px;
opacity: 0;
}
25% {
left: 100px;
opacity: 0.5;
}
50% {
left: -100px;
opacity: 0;
}
75% {
left: 100px;
opacity: 0.5;
}
to {
left: -100px; opacity: 0;
}
}
Na Figura 4, estou definindo o que o quadro chave fará em um determinado momento em uma iteração simples. Defino um ponto inicial (to) e um ponto final (from), além de pontos intermediários, representados como porcentagens de sua duração definida. Honestamente, não muito difícil. Agora, estimulando o lado criativo para produzir algumas excelentes animações, essa é uma história diferente!
Novamente, para dar suporte a todos os navegadores diferentes atualmente no mercado você tem de usar os prefixos de fornecedor apropriados. No caso de quadros chave, seria como @-webkit-keyframes e assim por diante.
Observe que você pode ver exemplos que funcionam de todas as amostras mencionadas neste artigo online em bit.ly/I0Pa4d, e você também deve conferir a incrível série de demonstrações interativas e práticas do CSS3 em bit.ly/pF4sle, onde você pode explorar uma variedade das diferentes especificações de CSS sem mesmo escrever uma linha de CSS.
Você poderá notar que essas demonstrações são sobre o Windows 8. Isso é porque com a chegada do Windows 8, a equipe do Windows introduziu um novo modelo de programação. Os desenvolvedores da Web agora podem aproveitar suas habilidades e criar um aplicativo nativo para o Windows 8 usando HTML5, CSS3 e JavaScript. A Microsoft acabou de abrir uma área de superfície completamente nova para que você venda seus aplicativos em todo mundo. Recomendo que você confira o Centro de Desenvolvimento do Windows em dev.windows.com.
Esse é um momento estimulante para ser um desenvolvedor de software, Web ou outro. As tecnologias estão avançando muito rapidamente, é fácil ficar sufocado com todas as ferramentas novas em sua caixa de ferramentas. De toda forma, é importante olhar em frente e entender as ferramentas e técnicas à sua disposição. A última coisa que você quer fazer é começar a criar uma porção de imagens bonitas quando você pode simplesmente adicionar algumas poucas linhas de CSS para obter uma sombra.
Clark Sell trabalha como divulgador sênior da Web e do Windows 8 para a Microsoft fora de Chicago. Ele mantém um blog em csell.net, podcasts em developersmackdown.com e pode ser encontrado no Twitter em twitter.com/csell5.
Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: John Hrvatin e Brandon Satrom