Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Backgrounds – Parte 6: Degradê Parte 2 - Kolaborativa

Backgrounds – Parte 6: Degradê Parte 2

Degradê


Então galera! vamos continuar a parte 2 sobre Degradê usando apenas o CSS3 puro. Para quem não viu o anterior, acesse Backgrounds – Parte 5: Degradê Parte 1

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)

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

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

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

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

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

<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:

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

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 (“,”).

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

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

Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

There are 1 comments. Add yours

  1. 20th setembro 2011 | estenio says: Responder
    no exemplo"Degradê superior ESQUERDA(Left) brilhante para Inferior DIREITA(Right)" como eu faço para fazer nos quatro cantos ao mesmo tempo? ou não da?

Join the Conversation