Page 60 - Locaweb - Edição 28
Basic HTML Version
locaweb
::
lw
_
programação
Ave,Ceaser!
Aprenda a criar animações de
forma simples e rápida com o
CSS 3, que alia programação a
design de páginas eletrônicas
Por
::
João Felipe Lima
Desde o início do desenvolvimento web, quando
o HTML ainda era recém-nascido, o CSS
(Cascading Style Sheets, ou folhas de estilo) foi adotado
como referência em design e composição de elementos.
Ele foi criado para melhorar a customização de websites
e, desde então, ganhou melhorias até chegar a sua última
versão, a CSS 3, que garante facilidade na criação de
animações com o Ceaser. Nesta reportagem, você
aprenderá a trabalhar com essa funcionalidade, que
substitui adequadamente o Flash.
Antes de chegar à última versão das folhas de estilo,
é importante contextualizar o CSS. Em sua primeira
versão, ele tinha apoio a fontes, cor do texto, background,
espaçamento entre as palavras, alinhamento, margens,
paddings e alguns outros atributos. Na evolução CSS 2,
folhas de estilo
::
ceaser
começou a ganhar atributos que hoje em dia são
essenciais, como z-index e tipo de mídia. Em seguida,
chegou à versão CSS 2.1, atualmente a mais popular.
O anúncio do CSS 3, que embarca na “onda” do
HTML 5 com muitas inovações, principalmente com
relação a animações, foi feito com muito barulho. As
novidades mais interessantes são o uso de sombra,
layout multicolunas, novos seletores, bordas redondas,
transformação 2D e 3D, bordas redondas.
Essas características já estão em desenvolvimento
há anos, mas o suporte aos navegadores começou a
evoluir há pouco tempo e ainda não é dos melhores.
Por isso, apenas recentemente o CCS 3 começou a
ganhar popularidade. Afinal, não adianta surgir uma nova
tecnologia caso não existam adeptos a ela. É possível ter
noção do suporte dos navegadores ao CSS 3 ao observar
a seguinte tabela:
Navegador Versão Suporte a CSS 3
Firefox Gecko
3.6
73,5%
4
79,4%
SafariWebkit
4
88,2%
5
97,1%
ChromeWebkit
6 - 9
94,1%
10 - 11
97,1%
IETrident
6 - 8
2,9%
9
52,9%
Opera Presto
10.6 - 11 70,6%
11.10
79,4%
Esses números revelam a falta do suporte mínimo
por parte dos navegadores ao CSS 3, o que torna o
seu uso algo crítico por enquanto. Para os adeptos da
evolução, o jeito é recorrer a soluções como o Modernizr
, uma pequena biblioteca
JavaScript que detecta quais são os recursos que o
navegador do usuário possui para HTML 5 e CSS 3. Isso
possibilita a criação de instruções condicionais para suprir
esta necessidade.
Posto tudo isso, finalmente chega-se ao advento
das animações no CSS 3. Por muito tempo, essa ação
Site Modernizr: pequena biblioteca JavaScript detecta quais são os
recursos que o navegador do usuário possui para HTML 5 e CSS 3
60
