O Desenvolvedor

Retomei meus estudos de HTML5, que eu gostaria de publicar por aqui mas sempre acabo apenas na leitura, mas resolvi utilizar CSS3 na versão nova do And After, deixando de lado preocupações visuais com o Internet Explorer.

Curvas arredondadas e backgrounds com gradientes funcionarão apenas em navegadores com suporte ao CSS3, porém posicionamento, tamanho, formatação de texto e funcionalidades funcionarão perfeitamente em qualquer navegador. Acho que esse é o método de desenvolvimento ideal – e mais rápido.

Vou abordar alguns temas relacionados ao CSS3 nos próximos posts, vamos ao background com degradê!

 

Background gradient com CSS

Fazer um background sem imagens tem diversas vantagens, entre as principais posso listar: menos kb para carregar, facilidade na manipulação por javascript, manutenção mais fácil.

Debatendo com o @MathieuRousseau sobre o uso ou não do CSS3, levantamos a questão da infelicidade que é não existir um padrão bem definido para o CSS3, mas a implementação não é tão dolorosa assim, apesar de ainda não funcionar corretamente uma forma cross-browser única.

Vamos a exemplos do código!

Gradiente vertical

.boxVertical {
            background-color: #333; /* cor do bg caso tudo abaixo de errado */
            background-image: url(images/linear_bg_2.png); /* imagem usada caso não exista suporte ao css3 (IE) */
            background-image: -moz-linear-gradient(100% 100% 90deg, #333, #efefef); /* para o mozzila */
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#333)); /* para o webkit*/ }

 Gradiente horizontal

.boxHorizontal {
            background-color: #333; /* cor do bg caso tudo abaixo de errado */
            background-image: url(images/linear_bg_2.png); /* imagem usada caso não exista suporte ao css3 (IE) */
            background-image: -moz-linear-gradient(100% 100% 180deg, #333, #efefef); /* para o mozzila */
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#333)); /* para o webkit*/
} 

 

Como usar o -moz-linear-gradient

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Point

Descrição: Interpretado como "background-position", define onde deve começar o gradiente.
Valores: porcentagem, pixels, "left", "center", or "right" para horizontal e "top", "center", ou "bottom" para vertical.

 

Angle

Descrição: ângulo da direção do gradiente.
Valores: degrees (90deg), grads (100grad), radians (1rad)

 

Stop

Descrição: valor composto de uma cor seguido por uma "parada" opcional (percentual ou px) que define a cor e a extensão dela no gradiente.
Valores: porcentam ou px (stop) e cor (hexadecimal, rgb…)

 

Para mais informações leia a documentação completa (em inglês)

 

Como usar o -webkit-gradient

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

 

type

Descrição: define o tipo de gradiente
Valores: linear ou radial

 

point

Descrição: um par de valores separados, que definem de onde irá o gradiente. Os dois pares definem início e fim de X e Y do gradiente.
Valores: pixels, porcentagem ou top, bottom, left e right

 

radius

Descrição: define o raio do gradiente radial
Valores:

 

Stop

Descrição: valor composto de uma cor seguido por uma "parada" opcional (percentual ou px) que define a cor e a extensão dela no gradiente.
Valores: porcentam ou px (stop) e cor (hexadecimal, rgb…)

 

Curiosidades

O webkit, pelo menos até agora, continua carregando a imagem de background, mesmo que ela não seja exibida.

O Firefox (-moz) a partir da versão 3.6 não faz o download da imagem quando é utilizado o gradient, economia de uma requisição http!

 

Dicas Go Horse

• O Internet Explorer sempre será um problema, porém ignorá-lo completamente não é uma solução boa. Mas se preocupar muito com ele é uma péssima idéia.
• O site não precisa renderizar exatamente igual em todos os navegadores, deixe esta idéia de lado se preocupe apenas em fazê-lo funcionar em quase todos os navegadores.
• Na nova versão do And After e no Eu Compraria! Shop resolvi ignorar o Internet Explorer quanto a border-radius e background-gradient. O usuário de IE poderá usar e navegar no site todo, sem problemas… porém a experiência visual (falei bonito, ein?) de quem utilizar um navegador decente será muito mais agradável: shadows, text-shadows,border-radius,background-gradient… não usei imagem de background no IE, apenas a cor de fundo, assim economizo requisições http.

 

Não achei muita coisa em português explicando sobre o background-gradient, então resolvi explicar um pouco mais ao invés de só publicar exemplos, espero que seja útil.

Duvidas e sugestões nos comentários!

 

Mais referências sobre background-gradient em:

• CSS Tricks
• Webkit – background gradient
• Mozilla gradient