Backgrounds – Parte 5: Degradê Parte 1

Degradê

Então pessoal! desta vez vamos aprender como conseguir o efeito Degradê usando apenas o CSS3 puro. Assim como outras novidades trazidas pelo CSS3, nos possibilita criar efeitos que nos liberta da escravidão das imagens.

O recurso degradê em CSS foi introduzido pela Webkit por cerca de dois anos, mas raramente foi utilizado devido à incompatibilidade com a maioria dos browers. Mas agora com o Firefox 3.6 +, também dando suporte, podemos criar o estilo de degradê sem ter de criar uma imagem.

Portanto navegadores modernos baseados em -moz e -webkit terão suporte adequado a esta propriedade que atualmente é aceita apenas no Chrome, Firefox e Safari em suas versões recentes.

Mozilla e Webkit geralmente adotam a mesma sintaxe para propriedades CSS3, mas infelizmente isso não acontece com o degradê. E a sintaxe definida por convenção pela W3C foi adotada pelo Firefox, e é nela que temos que prestar atenção. Mas para podermos apresentar o efeito degradê em navegadores baseados em -webkit como Chorme e Safari também colocaremos no código.

OBS: Lembrando-se que para usar a propriedade no Mozilla Firefox utiliamos -moz- antes da propriedade.

Existem dois tipos básicos de degradê definidos atualmente, linear e radial. E são especificados pelo linear-gradient e radial-gradient.

Podemos usá-las como valores em quaisquer propriedades que aceitem imagens. Por exemplo:

background-image
border-image
list-style-image
content

Linear Gradient

Um degradê linear é aquele que muda de cor em um eixo em linha reta do objeto em questão.

Declaração da sintaxe:

-moz-linear-gradient(posição ou ângulo, cor-de-partida, cor-final);

O primeiro argumento para a função especifica a linha que dá ao degradê uma direção e determina como as cores são posicionadas. Ela pode ser expressa através de posicionamento ou através de ângulo.

<Posicionamento>

Para ajudar vai aqui os valores válidos se utilizarmos o posicionamento:

x-pos y-pos
x-% y-%
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Exemplo

A melhor maneira de se aprender é fazendo, então vamos aos exemplos usando o posicionamento:

Degradê da ESQUERDA(Left) para DIREITA(Right)

#degrade {
width: 300px;
height: 100px;
background: -moz-linear-gradient(left, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}

Funciona no: ie2 Backgrounds – Parte 5: Degradê Parte 1 firefox Backgrounds – Parte 5: Degradê Parte 1 chrome Backgrounds – Parte 5: Degradê Parte 1 safari Backgrounds – Parte 5: Degradê Parte 1 opera2 Backgrounds – Parte 5: Degradê Parte 1

Degradê da DIREITA(Right) para ESQUERDA(Left)

#degrade {
width: 300px;
height: 100px;
background: -moz-linear-gradient(right, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}

Degradê de TOPO(top) para BAIXO(bottom)

#degrade {
width: 300px;
height: 100px;
background: -moz-linear-gradient(top, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}

Degradê de BAIXO(bottom) para TOPO(top)

#degrade {
width: 300px;
height: 100px;
background: -moz-linear-gradient(bottom, #00abeb, #fff); /*para o Firefox*/
background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff)); /*para navegores Webkit*/
}