Degradê

Agora vamos entender como usar essa propriedade expressa através de ângulo.

<Ângulo>

Se definirmos a direção com o ângulo vai ficar:

• Se o é maior ou igual a 0deg e menos de 90deg, o ponto de partida da linha de gradiente é o canto esquerdo inferior da caixa de gradiente.
• Se o é maior ou igual a 90deg e menos 180deg então, o ponto de partida da linha de gradiente é o canto direito inferior da caixa de gradiente.
• Se o é maior ou igual a 180deg e menos 270deg então, o ponto de partida da linha de gradiente é o canto superior direito da caixa de gradiente.
• Se o é maior ou igual a 270deg e menos 360deg então, o ponto de partida da linha de gradiente é o canto superior esquerdo da caixa de gradiente.

Se tanto o posicionamento quanto o ângulo são especificados, o ponto de partida do degradê é determinado pelo posicionamento, o degradê de linha se estende ao ângulo, e o ponto final é determinado de forma semelhante ao caso anterior – com base no ângulo.

Se ambos forem omitidos(posicionamento e ângulo), isso equivale a simples especificação de “top” para o ponto de partida. Ou seja, ele define um gradiente vertical, começando no topo e terminando na parte inferior.

Exemplo

Como sempre, a melhor maneira de se aprender é fazendo, então vamos aos exemplos usando o ângulo:

• Degradê superior ESQUERDA(Left) para Inferior DIREITA(Right)

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

Funciona no:

• Degradê superior Inferior DIREITA(Right) para ESQUERDA(Left)

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

Funciona no:

• Degradê superior ESQUERDA(Left) brilhante para Inferior DIREITA(Right)

#degrade {
width: 300px;
height: 150px;
background: -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%); /*para o Firefox*/
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white)); /*para navegores Webkit*/
}

Funciona no:

<color-stop>

Posições podem ser especificadas ao longo do eixo do degradê com uma cor para cada uma delas, chamadas de “color-stops”, e as áreas entre cada color-stop tem uma transição suave entre si.

Qualquer cor no degradê forma uma linha reta que é perpendicular ao eixo de inclinação. Na imagem abaixo, o eixo do degradê começa a partir do canto superior esquerdo da div, e é direcionado a um ângulo de 45 graus(315deg). Dois color-stops são especificados, vermelho e azul.

Exemplo

Então vamos aos exemplos usando o color-stop:

#degrade {
width: 300px;
height: 150px;
background: -moz-linear-gradient(left top 315deg, red, blue); /*para o Firefox*/
background: -webkit-gradient(linear, left top, right bottom, from(red), to(blue)); /*para navegores Webkit*/
}

Funciona no:

Múltiplas color-stop

O color-stop especifica um valor de cor intermediária e esse valor é composto da cor, e cada cor adicionada é seguida por uma parada definida por vírgula (“,”).

#degrade {
width: 300px;
height: 150px;
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /*para o Firefox*/
ackground: -webkit-gradient(linear, left center, right center, from(red), color-stop(18%, orange), color-stop(34%, yellow), color-stop(47%, green), color-stop(67%, blue), color-stop(84%, indigo), to(violet)); /*para navegores Webkit*/
}

Funciona no:

Extras

Agora pra galerinha que quer uma mãozinha, ai vai alguns sites que possuem ferramentas online para ajudar na hora de cria seu degradê CSS3, podendo já serem aplicados em menus.

Ferramenta Online de Menu em Degradê
Ultimate CSS Gradient Generator

Compartilhe