Desde final de 2009, quando o W3C começou a falar sobre CSS animation, muitos exemplos começaram a surgir mostrando a utlização de keyframes (Quadros-chave), tipo de animação, delay da animação, etc. Em pleno 2012 ainda vemos exemplos simples de quadrados rodando, cores trocando. Estava conversando com o Felipe Nascimento Moura sobre a questão de criar experimentos mais funcionais e etc. Acho que no fim chegamos à conclusão de que é muito importante criar esses labs, mas, ao mesmo tempo, alguns precisam começar a mostrar uma maneira mais funcional de utilizar o CSS3. Aproveito para mostrar o que o Felipe fez recentemente: A bandeira do Brasil com CSS3

Então, depois daquela conversa, decidi pegar uma das etapas do treinamento que dou e mostrar pra vocês por aqui como fazer. Vamos nessa? Começamos pelo fim. Vejamos primeiro o que vamos fazer.

Usaremos a técnica de font-face do CSS3 para usarmos uma fonte bem elegante.

Criando um título elegante com font-face do CSS3

Eu sempre recomendo utilizar o http://www.fontsquirrel.com ou o http://www.google.com/webfonts para utilizar uma fonte diferenciada (preciso dizer que prefiro o Font Squirrel, por me dar uma gama melhor de fontes, além de gostar mais da usabilidade do site na hora da navegação e visualização das fontes escolhidas).

Primeiro passo: colocar no CSS o trecho de código para chamar as fontes externas

O google webfonts lhe dá um CSS externo (o link) que chama essa fonte diferenciada, assim você não precisa armazenar os arquivos no seu servidor. Por outro lado, fica tudo dependendo de uma requisição a um serviço que não é seu. O font squirrel lhe dá todos os arquivos e no mesmo zip já vem o css chamando essas fontes e um exemplo prontinho para você começar a utilizá-la.

O código que você vai colocar no CSS é esse:
@font-face {
font-family: 'WalkwayBoldRegular';
src: url('Walkway_Bold-webfont.eot');
src: url('Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('Walkway_Bold-webfont.woff') format('woff'),
url('Walkway_Bold-webfont.ttf') format('truetype'),
url('Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Esse código @font-face, como vocês podem ver, chama vários arquivos diferentes da mesma fonte, isso é necessário para compatibilidade em browsers e devices (Dispositivos) diferentes.

Segundo passo: fazer a seguinte chamada no CSS

h1 {
font-family: 'WalkwayBoldRegular';
}

Fácil, né? Okay, vamos então fazer a aparência da página.

HTML da página

O HTML desse exemplo é bem simples, é só inserir dentro do body:

<div>
<h1>Cow ball tip corned beef meatball</h1>
<h2>swine filet mignon, boudin turducken ribeye shankle</h2>
<p>Tenderloin turducken rump filet mignon, bresaola pancetta jowl brisket sirloin. Drumstick venison jowl swine kielbasa chuck, sausage leberkäse tongue rump shankle ham corned beef tail ribeye. Strip steak andouille chuck ball tip ham brisket, pancetta prosciutto shoulder drumstick short ribs. Capicola bresaola flank pork belly spare ribs shank, jerky beef ribs jowl meatball pork loin tail. Turkey boudin swine, flank fatback tenderloin corned beef t-bone ground round venison jowl short loin leberkäse drumstick. Ball tip frankfurter fatback chicken shoulder hamburger boudin, pancetta strip steak pork ham pork loin capicola turkey pastrami.</p>
</div>

Feito isso, vamos colocar o CSS padrão.

CSS simples da página com font-face (sem animações)

@font-face {
font-family: 'WalkwayBoldRegular';
src: url('Walkway_Bold-webfont.eot');
src: url('Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('Walkway_Bold-webfont.woff') format('woff'),
url('Walkway_Bold-webfont.ttf') format('truetype'),
url('Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
font-weight: normal;
font-style: normal;
}

body {
font: normal normal 10px/1em arial;
}
.box {
width:480px;
margin:50px 50px 50px 40px;
padding-left: 40px;
border-left:10px solid #bbb;
position:relative;
left:0;
}
h1 {
font: normal normal 6em/.8em 'WalkwayBoldRegular';
margin:0;
text-transform: lowercase;
margin-bottom: .4em;
letter-spacing: -.02em;
}
h2 {
font-size:3em;
font-weight: normal;
color:#777;
line-height:1em;
}
p {
font-size:1.6em;
line-height: 1.4em;
margin-bottom:.8em;
color:#777;
}

A borda lateral ficará cinza claro, o título ficará já com a fonte bacana (lembrando que você precisa baixar a fonte que você deseja, como foi falado no primeiro passo).

Fazendo o efeito HOVER (passar do mouse) ficar mais sexy através do CSS ANIMATION

Para isso, precisamos colocar o status de como o elemento ficará com o hover e, depois disso, colocar os atributos de animação nos devidos seletores.

Primeiro passo: colocando o :hover no texto.box:hover {

border-color:#F90;
border-left-width:20px;
}
.box:hover p {color:#2b2b2b;}

Não fizemos nada de CSS3, nem nada inovador; apenas mudamos a cor e espessura da borda da div com a classe BOX, e a cor da letra do paragrafo. Agora vamos colocar o CSS animation para dar movimento a esse efeito.

Segundo passo: incluindo CSS ANIMATION

Como vocês perceberam, criamos os hovers em dois seletores: o .box e o P que está dentro dele. Então, vamos acrescentar essas linhas nos dois itens que já existem no nosso CSS:

-moz-transition:all .3s linear;
-webkit-transition:all .3s linear;
transition:all .3s linear;

ficando assim:

.box {
width:480px;
margin:50px 50px 50px 40px;
padding-left: 40px;
border-left:10px solid #bbb;
position:relative;
left:0;
-moz-transition:border .3s linear;
-webkit-transition:border .3s linear;
transition:border .3s linear;
}

p {
font-size:1.6em;
line-height: 1.4em;
margin-bottom:.8em;
color:#777;
-moz-transition:all .3s linear;
-webkit-transition:all .3s linear;
transition:all .3s linear;
}

Embora já existam vários sites, blogs, livros que explicam o que é a sintaxe TRANSITION no CSS3, deixa eu rapidamente dizer o que eu utilizei para fazer a animação…

No seletor .box, eu coloquei que a transição só vai ocorrer na mudança de valores do atributo BORDER – é interessante avisar isso, pois foi bem observado pelo Zeno Rocha, em um treinamento que demos juntos, que, se deixar como ALL, o CSS ANIMATION pode acabar dando conflito com o CSS TRANSITION; por isso, tomem cuidado!

O segundo item é a velocidade em que ocorrerá essa animação. Optei por 0.3 segundos. Uma dica no CSS é que valores decimais não precisam ter 0 na direita, podendo apenas usar .3 ou qualquer outro valor. Por fim, escolhi a animação linear que indica o que chamamos de “easing” da animação, basicamente se há alguma aceleração ou redução da velocidade ao longo da animação. Como não desejo isso, mantive o linear.

Reparem que no seletor P eu deixei o ALL, já que não pretendo utilizar nenhum animation nele, ou seja, não havendo chance de conflito.

Testem e vejam que ao passar o mouse na div, a borda está ganhando cor e tamanho, enquanto o texto do parágrafo fica mais escuro. Já está bastante elegante e nem por isso pobre, pense na quantidade de efeitos que você pode fazer com isso.

Por fim, o CSS ANIMATION

O CSS animation é sempre bárbaro, mesmo ainda consumindo muito do desempenho do CPU para acontecer. Vamos agora criar a chegada do conteúdo para o usuário. O efeito acontece apenas no seletor .box, ou seja, precisamos primeiro chamar a animação que vai ocorrer nesse seletor, acrescentando as linhas a seguir no .box:

-moz-animation: box 1400ms 1 linear;
-webkit-animation: box 1400ms 1 linear;
animation: box 1400ms 1 linear;

Ficando assim:

.box {
width:480px;
margin:50px 50px 50px 40px;
padding-left: 40px;
border-left:10px solid #bbb;
-moz-animation: box 1400ms 1 linear;
-webkit-animation: box 1400ms 1 linear;
animation: box 1400ms 1 linear;
position:relative;
left:0;
-moz-transition:border .3s linear;
-webkit-transition:border .3s linear;
transition:border .3s linear;
}

Explicando rapidamente também a linha do CSS ANIMATION (box 1400ms 1 linear): BOX é o nome da animação. Eu fiz o mesmo nome da class da div para ficar subentendido que animarei aquela parte, mas vale lembrar que poderia ser qualquer outro nome. Eu só preciso na hora de escrever a animação propriamente dita, usar O MESMO NOME dessa chamada, ou seja, se usar BANANA aí, tenho que usar BANANA quando escrever a animação, ok?

Depois disso, temos o 1400ms, que é o tempo em que ocorrerá a animação. Após isso temos o número “1″, que é quantas vezes quero que aconteça essa animação, e por fim é o “linear”, que, assim como já expliquei no TRANSITION, indica o que chamamos de “easing” da animação (basicamente se há alguma aceleração ou redução da velocidade ao longo da animação).

Veja o resultado final

ver demo

Aproveito o espaço final para dizer que, diversas coisas podem ser feitas através do bom senso da animação utilizando CSS3. Cabe, acredito eu, mais ao design de interfaces pensar em uma interação elegante e sexy utilizando-as do que o desenvolvedor inventando-a. Design que conhece código e desenvolvedor antenado em design formam um belo time. Pensem nisso!