Degradê (gradiente) com CSS
CSS - Criar degradê (gradiente) com CSSCriando 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);
Veja o Resultado:
Criação e Diagramação
