Design na web com css3

Por Zeno Rocha

Se tem uma coisa que eu aprendi trabalhando ao lado de designers é que, quando o assunto é web, quanto mais eles entendem sobre linguagens de marcação/programação, mais se sentem a vontade para produzir excelentes peças e, portanto, melhores são seus produtos finais.

Não digo que você tenha que saber como criar um ponteiro em C++ ou como implementar um servlet em Java. A questão não é entender tudo sobre de programação, mas sim seus conceitos.

Em equipes pequenas, a função de um designer não fica apenas na elaboração da UI de uma aplicação. Muitos também são responsáveis por elaborar todo o conceito do produto e principalmente toda a UX. Por isso a necessidade de entender o que é possível de ser implementado por um programador ou não.

Por muito tempo o trio HTML/CSS/JavaScript não atendia as calorosas mentes criativas dos designers. Isso explica a fama de softwares como Flash, pois com ele “tudo era possível”, enquanto que, se você tivesse que desenhar um site em HTML, só poderia elaborar um layout quadradão.

Mas isso agora é passado, com a nova especificação do CSS muitas portas se abriram para criar efeitos visuais antes alcançados apenas por ferramentas proprietárias como Flash e Silverlight.

Cores

Além dos já tradicionais modelos de cores RGB e hexadecimal, podemos agora escolher cores no modelo HSL que, como a própria sigla já diz, define os níveis de matiz, saturação e luminosidade. Sem contar na possibilidade de manipular o canal alpha dessas cores com os modos RGBA e HSLA.

Mais detalhes: https://developer.mozilla.org/en/CSS/color_value

Tipografia

Durante anos a limitação tipográfica nos navegadores frustou profissionais do mundo todo, só era possível escolher fontes de sistema, ou seja, só restava saber se você iria com Arial ou Verdana.

É por isso que uma das novidades mais revolucionadoras é com relação a nova propriedade @font-face. Com ela é possível utilizar qualquer família de fontes no seu site.

Para você ter ideia do que é possível criar apenas com CSS3, dê uma olhada nisso.

Os caras do Friends of Mighty também desenvolveram uns experimentos tipográficos incríveis:

• http://lostworldsfairs.com/atlantis/
• http://lostworldsfairs.com/moon/
• http://lostworldsfairs.com/eldorado/

Para começar a brincar com isso agora mesmo não deixe de conhecer o Font Squirrel, uma ferramenta que te permite fazer upload de qualquer fonte e lhe entrega todos os arquivos necessários para aplicar essa fonte no seu site.

E também o Google Web Fonts, uma galeria gigantesca de fontes gratuitas.

Esqueça as imagens, agora você não tem mais desculpa para usar a fonte que quiser com o efeito que quiser.

Mais detalhes em: http://sixrevisions.com/css/font-face-guide/

Bordas Recheadas

Um detalhe tão simples, mas que sempre deu um trabalho para os desenvolvedores implementarem são as bordas arredondadas.

O que era possível apenas com o uso de imagens, agora é uma propriedade nativa do CSS3. E isso é só o começo, também é possível definir cores diferentes e estilos diferentes para cada borda e até aplicar imagens.

Mais detalhes em:

• https://developer.mozilla.org/en/CSS/border-radius
• https://developer.mozilla.org/en/css/border-color
• https://developer.mozilla.org/en/CSS/-moz-border-image

Dispositivos Móveis

Com a ascensão do uso de dispositivos móveis, surgiu o conceito de Resposive Web Design e com ele a preocupação de um layout que se adaptasse para cada tamanho de tela. Media Queries permite definir estilos para cada monitor e com isso abre possibilidades jamais vistas.

Por exemplo, abra esse site e redimensione a janela do seu navegador para ver o que acontece. Esse e muitos outros exemplos podem ser encontrados em mediaqueri.es uma galeria bem legal de sites que exploram o uso de Media Queries.

Mais detalhes em: http://tableless.com.br/introducao-sobre-media-queries/

Animação!?

Sim! Agora você pode criar animações só com CSS também. Tudo isso através das propriedades de Transição, Transformação em 2D/3D e Animação.

Dê só uma olhada no que o Anthony Calzadilla tem feito:

• http://www.optimum7.com/css3-man/animation.html
• http://www.anthonycalzadilla.com/i-twitty-the-fool/

Mais detalhes em: http://css3.bradshawenterprises.com/

Quero aprender! #comofaz?

Você pode começar pelo excelente livro CSS3 for Web Designers feito pelos caras por trás do A List Apart.

Ou se preferir, pode conferir essa lista de links escolhidas a dedo para te ajudar nessa missão.

• http://css3please.com/
• http://www.css3.me/
• http://mothereffinghsl.com/
• http://layerstyles.org/
• http://border-radius.com/
• http://leaverou.me/css3patterns/
• http://csswarp.eleqtriq.com/
• http://westciv.com/tools/transforms/index.html

Viu só?

Dá pra fazer muita coisa legal usando apenas CSS hoje!

E olha que eu não falei de muita coisa, você também pode desenhar degradês, aplicar múltiplos backgrounds, sombras em texto ou bloco, opacidade e muito mais.

Mesmo que o ato de codificar possa assustar alguns de vocês em um primeiro momento. Fica aqui minha provocação, por quê não ultrapassar essa barreira de vez em quando e por quê não começar com CSS3?