[ Tutorial ] Utilizando Degrades em site Utilizando o CSS

Criando degradês em divs ou backgrounds utilizando comandos CSS

Informação:
O recurso de criar degradês (ou gradientes) ja havia sido entroduzido pelo webkit há mais de 2 anos mas era raramente usado pelo fato de não ser suportado por grande parte dos navegadores na época.

Hoje em dia, com as constantes atualizações dos principais navegadores já é possível utilizar esse efeito em menus, boxs e até mesmo backgrounds sem a necessidade de se preocupar com problemas de incompatibilidade.

Obs: Vale lembrar que esse efeito é suportado pelos navegadores I.E. 5+, Firefox 3,6+, Chrome e Safari.

O código:
Para que o efeito seja suportado pelos diferentes navegadores (Internet Explorer, Chrome, Safari e Firefox) são necessárias diferentes linhas de comando para cada um pela diferença de como cada navegador interpreta o código.

Para facilitar a compreenção, usaremos as seguintes nomenclaturas:
 - Tipo: Especifica qual o tipo de gradiente a ser utilizado (linear, radial, etc);
 - Início e fim: Indicam qual a posição em que se inicia o gradiente e onde ele termina, que podem ser desde de posições (top left, bottom right) até número de pixels;
- Cor Inicial e final: Indicam qual a cor que inicia o gradiente e em qual cor ele termina. Em um exemplo podemos citar como #000 como cor inicial e #fff como cor final, gerando um gradiente que começa no preto e termina na cor branca.

/*Comando do Webkit (Chrome, Safari)*/
background: -webkit-gradient(<tipo>, <início>, <fim>, from(<cor inicial>), to(<cor final>));

/*Comando do Firefox*/
background: -moz-<tipo>-gradient(<início>, <cor inicial>, <cor final>);

/*Comando do I.E. - Neste caso é necessário recorrer a um filtro devido a falta de
suporte nas versões mais antigas do navegador*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<cor inicial>',
endColorstr='<cor final>');

 Vejamos abaixo um exemplo de código utilizando todos os comandos citados acima:

Background:
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
endColorstr='#999999');
 background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#999));
 background: -moz-linear-gradient(top,  #000,  #999);