Compreendendo os gradientes lineares CSS3

Criar uma imagem apenas para exibir um gradiente é inflexível e pode rapidamente se tornar uma má prática. Mas, infelizmente, no momento em que este livro foi escrito, talvez ainda fosse necessário, mas espero que não por muito mais tempo. Graças ao Firefox e ao Safari/Chrome, agora podemos obter gradientes poderosos com o mínimo de esforço. Neste artigo, mostraremos uma implementação simples de gradientes CSS e como essa propriedade difere nos navegadores Mozilla e webkit.

PS: O texto original deste artigo fornece um vídeo, mas por motivos bem conhecidos, não podemos assistir a este vídeo no Youtube. Alunos que desejam assisti-lo, encontrem uma maneira de assistir vocês mesmos (até 720P): http. ://www.youtube.com/watch?v=9D2hyM5SSCE

Webkit

Embora Mozilla e Webkit geralmente adotem a mesma sintaxe para propriedades CSS3, infelizmente eles não conseguem concordar com gradientes. Webkit é o primeiro kernel do navegador a suportar gradientes, usando a seguinte estrutura:

/* Sintaxe, retirada de: http://webkit.org/blog/175/introduzindo-css-gradients/ */
-webkit-gradient(<tipo>, <ponto> [, <raio>]?, <ponto> [, <raio>]? [, <parada>]*)

/* Na prática... */
plano de fundo: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));