Trabalhando com Ferramentas Poderosas do CSS3

() translation by (you can also view the original English article)

CSS3 é uma das ferramentas web mais legais disponíveis para desenvolvedores no momento. Usando alguns de seus recursos é possível criar efeitos que seria possível apenas com Photoshop, com código que é mais manutenível, rápido de carregar e que segue as tendências mais atuais. Contiuemos lendo sobre as ferramentos poderosas disponíveis e como combiná-las para ótimos efeitos gráficos.

CSS3 tem vários recursos, mas alguns são obrigatórios aprender se quisermos criar efeitos a la Photoshop. Chamamo-nos de "ferramentas poderosas". Elas são:

Raio das Bordas
Sombra das Caixas
Sombra dos Textos
Gradientes
Múltiplos Planos de Fundo

Cada um dos recursos ajuda a substituir imagens que talvez tenhamos criados no Photoshop. Ao fazê-lo, tornamos o sites mais manuteníveis já que podemos mudar as propriedades apenas alterando o CSS ao invés de editar uma imagem no Photoshop. Também deixamos os sites mais rápidos já que imagens usam muita banda. Exporemos os recursos, um por um.

Ferramenta Poderosa #1: Raio de Borda

Suporte dos Navegadores:

Safari: 3.2+
Firefox: 3.0+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

É provável que já tenha ouvido falar sobre border-radius um milhão de vezes. É muito fácil de usar e é suportado por todos os navegadores modernos. Se não conhece ainda, border-radius é uma forma de criar cantos arredondados com CSS—sem imagens! Vejamos a sintaxe.

1
2	-webkit-border-radius: size;
3	-moz-border-radius: size;
4	border-radius: size;

Há três sintaxes que precisamos usar. A primeira é para navegadores Webkit, como Safari e Chrome; a segunda para navegadores Mozilla, como Firefox; e a terceira é a versão sem prefixos, para navegadores que a suportam, como IE9, Opera e Safari 5.

Aplicar 10px de border-radius a uma div cria o efeito a seguir:

Ok, fácil! Sigamos para a próxima.

Ferramenta Poderosa #2: Sombras das Caixas

Suporte dos Navegadores:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Sombras das caixas são outro recurso bem suportado. Sua sintaxe é assim:

1
2	-webkit-box-shadow: offset_x offset_y blur_radius color;
3	-moz-box-shadow: offset_x offset_y blur_radius color;
4	box-shadow: offset_x offset_y blur_radius color;

De novo, precisamos usar os prefixos de fabricantes para Webkit e Mozilla. Os primeiro e segundo parâmetros são o deslocamento das coordenadas esquerda e superior do elemento. Usar valores positivos a essas propriedades move a sombra para direita e para baixo do elemento. Com valore negativos, move a sombra para esquerda e para cima do elemento. O blur_radius é a quantidade de desfoque que queremos adicionar à sombra (quão sólida ou distorcida a queremos). Por fim, o último parâmetro é a cor que queremos da sombra. Adicionar sombra à div de cantos arrendados que criamos, dará um efeito legal.

1
2	-webkit-box-shadow: 5px 5px 10px #555;
3	-moz-box-shadow: 5px 5px 10px #555;
4	box-shadow: 5px 5px 10px #555;

Outro recurso legal das sombras da caixa do CSS é a palavra-chave inset. Quando está presente, a sombra será criada dentro da caixa ao invés de fora. Isso cria um efeito legal de pressionamento para botões. Eis como nossa div parecerá com sombra inset.

1
2	-webkit-box-shadow: 0 0 20px #333 inset;
3	-moz-box-shadow: 0 0 20px #333 inset;
4	box-shadow: 0 0 20px #333 inset;

O último recurso das sombras da caixa que vale mencionar é a possibilidade de ter múltiplas sombras ao mesmo tempo. Isso é muito útil para evitar códigos extras no HTML só para aplicar uma sombra extra. Tudo que precisamos para isso é separá-las por vírgulas. Eis um exemplo:

1
2	-webkit-box-shadow: 0 0 20px #333 inset,
3	20px 15px 30px yellow,
4	-20px 15px 30px lime,
5	-20px -15px 30px blue,
6	20px -15px 30px red;
7
8	-moz-box-shadow: 0 0 20px #333 inset,
9	20px 15px 30px yellow,
10	-20px 15px 30px lime,
11	-20px -15px 30px blue,
12	20px -15px 30px red;
13
14	box-shadow: 0 0 20px #333 inset,
15	20px 15px 30px yellow,
16	-20px 15px 30px lime,
17	-20px -15px 30px blue,
18	20px -15px 30px red;

Ferramenta Poderosa #3: Sombras de Texto

Suporte dos Navegadores:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.1+
Internet Explorer: Esperamos que logo!

Sombras de texto são como sombras de caixa exceto que afetam texto ao invés do elemento inteiro. Felizmente, não é preciso de prefixo de fabricante para elas.

1
2	text-shadow: offset_x offset_y blur_radius color;

As opções de sombras de texto são as mesmas das sombras de caixa, exceto que não suporte para inset. Eis uma demo que faz um texto invisível pular da página.

1
2	color: #fff /* text color to white */
3	text-shadow: 0 0 50px #333;

Isso cria o efeito a seguir:

Assim como nas sombras de caixa, é possível ter várias sombras de texto, separando apenas com vírgulas. Eis um exemplo que cria um efeito de texto em chamas.

1
2	text-shadow: 0 0 4px #ccc,
3	0 -5px 4px #ff3,
4	2px -10px 6px #fd3,
5	-2px -15px 11px #f80,
6	2px -18px 18px #f20;

Sombras de texto podem criar efeitos maravilhoso e podem complementar outros efeitos muito bem.

Ferramenta Poderosa #4: Gradientes

Suporte dos Navegadores:

Safari: 4+
Firefox: 3.6+
Chrome: 5+
Opera: Esperamos que logo!
Internet Explorer: Esperamos que logo!

Gradientes são um dos recursos mais poderosos disponíveis se quisermos criar efeitos impressionantes. Embora suporte completo dos navegadores ainda não exista, podemos prover estilos alternativos. Lembremo-nos: Sites não precisam parecer o mesmo em todos navegadores. Há dois tipos de gradientes que podemos criar: gradientes lineares e radiais. Como esperamos, gradientes lineares movem-se em linha reta e radiais vão ao redor de um círculo. Usamos gradientes em qualquer lugar que podemos usar uma imagem, seja para plano de fundo, borda ou pontos de lista.

Infelizmente, há duas implementações diferentes: uma da Mozilla e outra da Webkit.

Sintaxe para Webkit

Safari e Chrome usam o motor de renderização Webkit, logo usam a mesma sintaxe. A sintaxe de gradiente deles é bem simples:

1
2	-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Webkit usa a mesma sintaxe para gradiente linear e radial. Basta alteremos o parâmetro type para mudar de um para outro.

Sintaxe para Mozilla

Firefox usa sintaxes diferentes para gradientes lineares e radiais, ambas bem diferentes das versões do Webkit.

1
2	-moz-linear-gradient( [<point> \|\| <angle>,]? <stop>, <stop> [, <stop>]*)
3	-moz-radial-gradient( [<position> \|\| <angle>,]? [<shape> \|\| <size>,]? <stop>, <stop>[, <stop>]*)

Vejamo-nas separadamente.

Gradientes Lineares

Por simplicidade, eis a sintaxe da Webkit para gradiente linear.

1
2	-webkit-gradient(linear, start_x start_y, end_x end_y, stop, stop...)

A sintaxe do Firefox é assim.

1
2	-moz-linear-gradient(angle start_x start_y, stop, stop...)

Na sintaxe da Webkit os parâmetros start_x e start_y especificam a posição inicial do gradiente e end_x e end_y a posição final. Podemos usar qualquer valor dimensional padrão do CSS, incluindo percentuais, assim como left, top, bottom, right e center para os parâmetros da posição. Paradas são formas de especificarmos cores a serem usadas em pontos específicos do gradiente. Podemos ter quantos cores de parada quisermos, mas precisamos ter pelo menos duas: inicial e final. Para cores de parada adicionais, podemos usar color-stop() provendo percentual como valor da posição ou decimal entre 0 e 1, além da cor. Por exemplo, color-stop(50%, black) criará uma cor de parada exatamente no meio do gradiente. Ao invés de usar 0% e 100% para cores inicial e final, existem as funções from() e to(). Só precisamos das cores para elas.

A sintaxe do Firefox é menos intuitiva e tem muitas formas de obter o mesmo resultado. A única coisa estática da sintaxe são as cores de parada, que são apenas as cores seguidas da posição em percentual. Para posições inicial e final, não precisamos do 0% e 100%. E se não os posicionamentos de qualquer outra parada de cor, elas serão distribuídas igualmente pelo gradiente. Diferente da sintaxe da Webkit, a do Firefox não tem uma posição final, apenas uma inicial e um ângulo. O gradiente executará da posição inicial no ângulo especificado. Se deixarmos o ângulo de fora, ele executará perpendicularmente àquele ponto. Se também deixarmos o ponto inicial de fora, o gradiente executará de cima para baixo. Essa sintaxe é um pouco confusa e menos flexível que a da Webkit, então é melhor aprender com exemplos.

Eis um exemplo simples de gradientes em CSS em ação. Esse gradiente vai do canto superior esquerdo ao canto esquerdo inferior (de cima a baixo) e do vermelho ao branco.

1
2	-webkit-gradient(linear, left top, left bottom, from(red), to(white));
3	-moz-linear-gradient(red, white)

Usá-lo como plano de fundo de uma div dá esse resultado:

Ao adicionar paradas de cor e alterando o ângulo do gradiente, obtemos um efeito diferente.

1
2	-webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red));
3	-moz-linear-gradient(left top, red, white, red);

Gradientes Radiais

Eis a sintaxe dos gradientes radiais no Webkit.

1
2	-webkit-gradient(radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius,
3	outer_circle_center_x outer_circle_center_y, outer_circle_radius,
4	stop, stop...)

A sintaxe do Firefox parece com isso.

1
2	-moz-radial-gradient(center_x center_y, shape size, stop, stop...)

Aqui sintaxe do Webkit é um pouco mais complicada que a do gradiente linear, mas os mesmo princípios se aplicam. Gradientes radiais na Webkit tem 2 círculos: um inicial e um final. Damos os centros X e Y para cada um dos círculos, junto de seus raios. Por fim, especificamos as paradas de cores do mesmo jeito que em gradientes lineares.

A sintaxe do Firefox para gradientes radiais é similar à dos gradientes lineares onde todas suas partes, exceto as paradas de cor podem ser deixadas de lado. Especificamos as posições centrais X e Y do gradiente, assim como na sintaxe do Webkit, mas não há círculo exterior no Firefox. Ao invés disso, damos uma forma e tamanho do gradiente. A forma pode ser um círculo ou elipse, sendo que a última não é possível ainda no Webkit. O tamanho aceita vários tipos de valores, exceto em pixels. Podemos ler mais sobre cada uma das constantes na Central do Desenvolvedor da Mozilla. Para esse tutorial, usaremos os valores padrões. De novo, se deixarmos as posições X e Y de lado, será assumido o centro do objeto que estamos preenchendo com o gradiente. Se deixarmos a forma e tamanho de lado, o gradiente assumirá um círculo que preenche a caixa inteira.

1
2	-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
3	-moz-radial-gradient(white, red)

Se aplicarmos esse gradiente ao plano de fundo de uma div, é isso que obteremos.

Ferramenta Poderosa #5: Múltiplos Planos de Fundo

Suporte dos Navegadores:

Safari: 3.2+
Firefox: 3.6+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Vários planos d efundo facilitam a criação de efeitos complexos no CSS sem precisar usar HTML extra. Com suporte, os elementos podem ter vários gradientes ou imagens de plano de fundo, junto da cor de fundo padrão. Não há diferença na sintaxe de planos de fundo para os simples - apenas os separe com vírgula e pronto!

Eis um exemplo de uma div com um plano de fundo com gradiente e um efeito texturizado legal usando uma imagem:

1
2	background: url(noise.png), -webkit-gradient(linear, left top, left bottom, from(#999), to(#333));
3	background: url(noise.png), -moz-linear-gradient(#999, #333);

Declaramos duas vezes já que vimos que há sintaxes diferentes para navegadores diferentes. Isso cria o efeito a seguir:

Combinando Poderes: Criando Botão CSS3 Impressionante

Agora que temos 5 ferramentas poderosas à disposição, combinemo-nas para produzir um efeito ainda melhor.

Há vários tipos diferentes de botões que podemos projetar. Para simplificar, emulemos algo existente - o estilo dos botões do Mac OS X.

Começaremos com o código HTML da demo. É bem simples, apenas duas div e um texto.

1
2	<div class="panel">
3	<div class="button">Button</div>
4	</div>

Agora, começamos com o básico do CSS. Primeiro, estilizemos o painel.


.panel {
    background: -webkit-gradient(linear, left top, left bottom, from(#bbbcbb), to(#959695));
    background: -moz-linear-gradient(#bbbcbb, #959695);
    background-color: #b7b9b7;
    width: 100px;
}

O painel é apenas o container do botão. Ele tem um gradiente indo do topo ao rodapé entre dois cinzas. Para os navegadores sem suporte a gradientes, uma cor de plano de fundo alternativa é dada.

Agora, vejamos o CSS do botão em si.


.button {
    display: inline-block;
    margin: 20px;

    padding: 3px 6px;
    font-family: 'Lucida Grande', Arial, sans-serif;
    font-size: 13px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    border: 1px solid rgba(0, 0, 0, 0.6);

    background: -webkit-gradient(linear, left top, left bottom, from(#fbfcfb), to(#9d9e9d));
    background: -moz-linear-gradient(#fbfcfb, #9d9e9d);
    background-color: #c0c2c0;

    text-shadow: rgba(255, 255, 255, 0.4) 0px 1px;

    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px;

    -webkit-user-select: none;
    -moz-user-select: none;
    cursor: default;
}

Há muito código aqui, que usa todas as ferramentas poderosas que descrevemos, exceto pelos vários planos de fundo. Há várias seções no código, que veremos uma por uma. As duas primeiras linhas são apenas informação de layout. Usar display: inline-block no botão faz ele crescer para o conteúdo caber, não importa o tanto de texto. A próxima seção traz informação importante para o botão. Por fim, na terceira seção, usamos a primeira ferramenta poderosa: raio de borda. No nosso botão, daremos 3px de raio. Depois, daremos uma borda. Notemos que usamos uma cor RGBA. Isso nos permite deixar o botão levemente transparente, criando uma cor acinzentada legal. Na próxima seção, ajustamos o plano de fundo do botão. Damos um gradiente de plano de fundo e uma cor sólida como alternativa a navegadores que não suportam gradientes Depois, usamos sombra de texto para fazer o texto parecer entalhado no botão. De novo, usamos RGBA pra um branco levemente entalhado na sombra de texto. A penúltima seção cria a sombra da caixa. Embora não pareça uma sombra mas com uma segunda borda, é um destaque legal ao rodapé do botão para fazê-lo parecer entalhado no plano de fundo, além de complementar a cor da borda. É um truque útil para quando queremos fazer algo parecer ter várias bordas - usamos bastante. Por fim, a última seção é um truque legal que previne a seleção de texto no Webkit e Firefox e configura o cursor a seta padrão ao invés do cursor de seleção de texto.

Até agora, o código faz o botão parecer com isso:

Ok, não tão ruim! Continuemos com a versão pressionada do botão.

1
2	.button:active {
3	background: #B5B5B5;
4	-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
5	black 0px 1px 3px inset,
6	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
7
8	-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
9	black 0px 1px 3px inset,
10	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
11
12	box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
13	black 0px 1px 3px inset,
14	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
15
16	text-shadow: rgba(255, 255, 255, 0.3) 0px 1px;
17	}

Ao definirmos a versão pressionada, podemos mudar algumas coisas. Primeiro, configuramos o plano de fundo para uma cor plana, removendo o gradiente adicionado antes. Isso se dá pela criação do efeito pressionado com uma sombra de caixa ao invés do gradiente. Depois, é configurar a sombra—múltiplas, no caso. A primeira sombra na lista é a mesma que temos no estado normal: destaque no rodapé do botão. A segunda e terceiras são as que fazem o botão parecer pressionado. A primeira delas é preta com sombra inter, vinda do topo a 1px e 3px de desfoque—sombra escura bem legal. A última sombra também é preta mas levemente transparente, de cima para baixo com 5px e desfoque de 12px. Isso cria um visual escurecido no rodapé do botão quando pressionado. A última coisa que precisamos fazer é reduzir a opacidade do texto um pouco quando o botão for pressionado para não destacar demais.

E é isso! O botão está completo. Eis como o efeito pressionado parece:

Conclusão

Substituir imagens com CSS tem vários benefícios. Facilita nosso trabalho de desenvolvedor já que não precisamos abrir o Photoshop toda vez que precisarmos alterar algo na interface do usuário. Faz o site ou aplicação web carregar mais rápido já que não precisa baixar várias imagens pesadas. E permite-nos criar experiências de usuário muito mais ricas, interativas e desejáveis de forma que eles continuem voltando ao site.

Deixaremos um pouco de inspiração para coisas que podemos fazer com CSS3. Não são, necessariamente, os exemplos mais reais do mundo, mas mostram o que é possível fazer.

iPhone Feito Apenas com CSS3

A primeira demo, criada por Jeff Batterton, é um iPhone criado em puro CSS3 - sem imagens. É bem impressionante, utiliza gradientes em CSS, sombras de texto e caixa, transições e transformações. Infelizmente, apenas aparece direito em navegadores Webkit, como Safari e Chrome. Pode ser nossa tarefa fazê-la funcionar no Firefox!

Ícones do iOS em Puro CSS3

Outra demo, talvez mais impressionante, criada por Louis Harboe. É a recriação de alguns dos ícones do iOS em puro CSS e uma recriação bem realista! A demo apenas funciona em navegadores Webkit. Se quisermos aprender mais sobre como os ícones foram reproduzidos, podemos ver a publicação de Louis Harboe em seu blog, descrevendo o processo.

Esperamos que tenham curtido o artigo! Sinta-se livre para nos acompanhar no Twitter ou deixar um comentário.