Gabriel Oliveira é um daqueles designers inquietos para quem o design vai além de cores, estilos, tipos e fontes (e o que mais vier). Instrutor na Caelum há dois anos no curso de mesmo nome, é também desenvolvedor web, de back-end e fron-end com HTML, CSS e JavaScript.

Em evento promovido recentemente pela Caelum, em São Paulo, Gabriel apresentou um ‘hands-on’ de CSS3, nova versão das famosas ‘Cascading Style Sheets’ (‘folhas de estilo em cascata’ ou simplesmente CSS), que definem estilos para apresentação e formatação de conteúdo com efeitos de transição e imagem, entre outros inúmeros aspectos de design para layout de páginas web, que você confere abaixo.

Os vídeos estão divididos em partes (o YouTube ainda não me permite publicar trechos de mais de 15 min cada, algo que deverá acontecer em breve, quando houver maior número de envios), portanto separei um ‘resumo do resumo’ para cada parte, uma vez que o mais interessante, é claro, é assistir à verdadeira ‘aula’ de efeitos em CSS3 oferecida pelo instrutor. Se você é designer e curte o mínimo de programação, ou apenas um curioso sobre o tema, vai se encantar com as novas possibilidades introduzidas pelo CSS3:

Parte 1 - Seletores avançados
[Estrutura simples de HTML com CSS para criar efeitos]

Parte 2 - Bordas arredondadas
[Antes impossível de fazer sem o uso de tabelas, agora com CSS3 são várias as opções para diferentes tipos de bordas arredondadas]
- Sombras / Transparência
[Blur, boxes e diferentes recursos para sombreamento: saturação, luminosidade, transparência, opacidade etc]

Parte 3 - Gradiente
[O bom do CSS3 é que agora podemos declarar um tamanho de fundo, mesmo sem imagem de fundo. Também é possível criar animações mesclando propriedades de fundo]

- Parte 4 – Navegadores e referências
[Compatibilidade com todos os navegadores: biblioteca client-side PrefixFree, plugins e mais]

Referência:

Lea Verou