Exportar (0) Imprimir
Expandir Tudo
Este tópico ainda não foi avaliado como - Avalie este tópico

Gradientes

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript permitem gradientes CSS3 (Folhas de Estilos em Cascata, Nível 3) em qualquer propriedade que aceite imagens, como a propriedade background-image (mais o valor image da propriedade abreviada background), a propriedade list-style-image e o conteúdo gerado. Os gradientes atuam conforme especificado na seção Gradients (Gradientes) do CSS3 Image Values and Replaced Content Module (Módulo de Conteúdo Substituído e Valores de Imagem CSS3) que, na ocasião em que este documento foi redigido, estava no estágio de Recomendação Candidata.

Gradientes são imagens que fazem uma transição suave de uma cor para outra. O Internet Explorer 10 fornece suporte para gradientes CSS3 lineares, circulares e elípticos, cada um dos quais são especificados por uma linha de gradiente e dois ou mais pontos de parada. Cada ponto de parada tem sua própria cor, e o Windows Internet Explorer preenche a área entre cada conjunto de pontos com uma transição de cor contínua de um para o outro.

Gradientes lineares

Em um gradiente linear, as cores têm uma transição suave ao longo de uma linha. Gradientes lineares são criados primeiro especificando uma linha gradual para o gradiente seguir e depois os dois ou mais pontos de parada de cores, separados por vírgulas. A sintaxe básica do gradiente linear é a seguinte:

linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

FunçãoDescrição

linear-gradient()

Especifica um gradiente linear especificando uma linha gradual e duas ou mais paradas de cor e deslocamentos.

Os valores possíveis para esta propriedade são as seguintes:

<angle>

Opcional. O ângulo que a linha gradual deve assumir, expresso como um número seguido de um designador de unidade de ângulo (por exemplo, "graus").

"0deg" aponta para cima e ângulos positivos aumentam no sentido horário. Portanto, "90deg" aponta para a direita, "180deg" aponta para baixo e assim por diante.

Se não é fornecido nenhum ângulo, a linha gradual começa no canto ou no lado oposto ao canto ou no lado especificado por <side-or-corner>.

<side-or-corner>

O valor opcional que especifica um canto ou lado final para o gradiente. Esse valor começa com "to", seguido de uma ou duas das palavras-chave a a seguir. Uma palavra-chave incluída especifica um lado final e duas palavras-chave especificam um canto final.

  • Os valores a seguir podem ser usados somente como o primeiro valor:
    • left  Indica finais de gradiente à esquerda.
    • right  Indica finais de gradiente à direita.
  • Os valores a seguir podem ser usados somente como o segundo valor:
    • top  Indica finais de gradiente em cima.
    • bottom  Indica finais de gradiente em baixo.
  • Não incluir nenhuma palavra-chave ou ângulo é igual a "to bottom".
<color-stop>

São requeridas pelo menos duas paradas de cor. Cada parada de cor tem um ou dois componentes — um componente de cor e um componente de posição opcional.

O primeiro componente define o componente de cor de um ponto de parada para o gradiente. Cada ponto de parada tem sua própria cor designada e a área entre cada ponto é preenchida com uma transição de cor contínua de um até o outro. Este valor pode ser qualquer valor de cor compatível.

Cada ponto de parada pode ter uma porcentagem opcional ou um valor de comprimento compatível que indica onde na linha gradual deve ser colocada a parada de cor. "0%" (ou "0px", "0em" e assim por diante) indica o ponto (ou lado) inicial; "100%" indica o ponto (ou lado) final.

 

O seguinte gradiente linear (usado como argumento para a propriedade background-image) tem três paradas de cor:

  • A primeira parada de cor está no canto superior direito e define uma linha gradual que se estende até o canto inferior esquerdo. A primeira parada apresenta um tom de amarelo.
  • A segunda parada de cor está na metade da linha gradual e apresenta um sombreamento de verde.
  • A parada de cor final está a 80% da linha gradual e apresenta um tom de azul. Desta parada até o final da linha gradual (entre 80% e 100%) a cor permanece nesse tom de azul.

A linha gradual começa no canto superior direito do retângulo e termina no canto inferior esquerdo. O ângulo real depende das dimensões do elemento preenchido pelo gradiente.

Exemplo de um gradiente linear começando no canto superior direito

background-image: linear-gradient(to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%);


Para replicar este gradiente usando um ângulo com a caixa de mesmo tamanho (250 px × 150 px), você especificaria o seguinte:


background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%);

Claro, quando o tamanho da área de preenchimento muda, esses dois gradientes parecem diferentes. Lembre-se disso ao decidir como especificar seus gradientes. O primeiro gradiente definido (com "to bottom left" especificado) é mostrado aqui em uma caixa de 450 px por 150 px.

Imagem de um gradiente linear em um retângulo mais largo que o primeiro

O segundo gradiente definido (com "210deg" especificado) é mostrado aqui em uma caixa do mesmo tamanho.

Imagem de outro gradiente em um retângulo largo, com mais amarelo mostrado

Gradientes radiais

Diferentemente dos gradientes lineares, que progridem de uma extremidade de uma linha para a outra, os gradientes radiais surgem de um único ponto e se espalham suavemente para fora em um círculo ou elipse. Você especifica um gradiente radial definindo primeiro um ponto central, depois o tamanho e a forma (se for uma elipse) do círculo ou elipse final — ou 100% — e então as paradas de cor no meio, separadas por vírgulas. A sintaxe básica do gradiente radial é a seguinte:

radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

FunçãoDescrição

radial-gradient()

Especifica um gradiente radial definindo primeiro um ponto central, depois o tamanho e a forma (se for uma elipse) do círculo ou elipse final — ou 100% — e então as paradas de cor no meio, separadas por vírgulas.

Os valores possíveis da propriedade são estes:

<shape>

Valor opcional que especifica a forma final do gradiente. Se esse valor é omitido, a forma final é um círculo, se o parâmetro size é um valor de comprimento único e, de outra forma, uma elipse.

  • ellipse  Indica que o gradiente está na forma de uma elipse.
  • circle  Indica que o gradiente está na forma de um círculo.
<size>

Valor opcional que especifica o tamanho da forma final do gradiente. Se esse valor é omitido, é usado o padrão de farthest-corner.

  • <length(s)>  

    Um ou dois valores de comprimento delimitados por espaço ou duas porcentagens.

    Quando é especificado um valor de comprimento, ele indica o raio do círculo.

    Quando são indicados dois valores (comprimento ou porcentagem), o primeiro representa o raio horizontal e o segundo, o raio vertical.

    Os valores de porcentagem são relativos à dimensão correspondente da caixa de gradiente. É possível usar porcentagens somente para especificar o tamanho de um gradiente elíptico, e não de um circular.

    Valores negativos são inválidos.

  • closest-side  Para gradientes circulares, esse valor indica que a forma final é do tamanho do círculo, de forma que encontre exatamente o lado da caixa mais próxima a seu centro. Para gradientes elípticos a forma de gradiente é do tamanho de uma elipse, de forma que encontre os lados vertical e horizontal da caixa mais próxima a seu centro.
  • closest-corner  Dimensiona a forma de gradiente para que ela encontre exatamente o canto mais próximo da caixa de seu centro. Para gradientes elípticos, a forma de gradiente tem a mesma proporção entre largura e altura que teria se closest-side fosse especificado.
  • farthest-side  Similar a closest-side, exceto pelo fato de que a forma do gradiente é dimensionada para corresponder ao lado da caixa mais distante de seu centro (no caso de gradientes circulares) ou aos lados vertical e horizontal mais distantes (no caso de gradientes elípticos).
  • farthest-corner  Dimensiona a forma do gradiente para que corresponda exatamente ao canto da caixa mais distante de seu centro. Para gradientes elípticos, a forma do gradiente tem a mesma proporção entre largura e altura que teria se farthest-side fosse especificado.
<position>

Valor opcional que especifica o centro do gradiente. Esse valo pode ter os mesmos valores da propriedade background-position. Se esse valor for omitido, é usado o padrão de center.

<color-stop>

São necessárias pelo menos duas paradas de cor. Cada parada de cor tem um ou dois componentes — um componente de cor e um componente de posição opcional.

O primeiro componente define o componente de cor de um ponto de parada do gradiente. Cada ponto de parada tem sua própria cor designada, e a área entre cada ponto é preenchida com uma transição de cor contínua de um até o outro. Esse valor pode ser qualquer valor de cor compatível.

O segundo componente é um valor percentual ou decimal opcional que indica onde do raio do gradiente (semelhante a uma linha gradual em um linear-gradient, mas do centro para fora) deve ser colocada a parada de cor. "0%" indica o início do raio do gradiente, e "100%" indica o ponto onde o raio do gradiente cruza a forma final. Por exemplo, um valor de "20%" indica que a parada de cor deve ser posicionada em um ponto a 20% do comprimento do raio do gradiente, a partir do começo da linha. Os valores podem ser negativos, o que indica que a cor especificada para esse valor está na transição intermediária para a próxima cor no centro do gradiente, de forma que a cor visível no centro está entre a cor especificada e a próxima cor.Os valores podem ser maiores que 100%, o que especifica um local a uma distância correspondentemente maior do centro do gradiente.

 

Muitas vezes, é possível usar a sintaxe de gradiente radial para produzir os mesmos resultados. Por exemplo, os três exemplos a seguir, quando aplicados a um elemento div de 250 × 150 pixels, produz a imagem mostrada aqui.

Gradiente elíptico simples aplicado a um retângulo de 250 por 150 pixels


background-image: radial-gradient(yellow, blue);

background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);

background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);

O exemplo a seguir é semelhante ao anterior, mas foi especificado um gradiente circular.

Gradiente circular simples aplicado a um retângulo de 250 por 150 pixels

background-image: radial-gradient(circle, yellow, blue);

O exemplo a seguir tem três cores especificadas. Qualquer das declarações produz esta imagem.

Gradiente elíptico com três paradas de cor especificadas

background-image: radial-gradient(#FFF133, #16D611, #00A3EF);

background-image: radial-gradient(ellipse at center, #FFF133 0%, #16D611 50%, #00A3EF 100%);

Claro, você também pode originar o gradiente radial em locais diferentes do centro da caixa de gradiente. Use as palavras-chave closest-side ou farthest-side para dimensionar o gradiente para que a forma final encontre o lado mais próximo ou mais distante, respectivamente, da caixa de gradiente.

Gradiente radial com três cores que começa no canto inferior esquerdo

background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);

Os exemplos a seguir definem o centro do gradiente a 40 px do lado esquerdo da caixa de gradiente e a 50 px do lado de cima da caixa de gradiente. O primeiro exemplo usa closest-side, então a forma final do gradiente é definida pelos lados mais próximos da caixa de gradiente — especificamente, os lados de cima e esquerdo.

Pequeno gradiente elíptico de três cores contido no canto superior esquerdo de uma caixa de gradiente

background-image: radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

O segundo exemplo usa farthest-side, então a forma final do gradiente é definida pelos lados mais distantes da caixa de gradiente — especificamente, os lados de baixo e direito.

Grande gradiente elíptico de três cores que termina nos lados direito e inferior de uma caixa de gradiente

background-image: radial-gradient(farthest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

Se você usa closest-side ou farthest-side com gradientes circulares, o tamanho é determinado pelo lado mais próximo da caixa de gradiente. No exemplo de closest-side a seguir, esse lado é o esquerdo.

Pequeno gradiente circular de três cores contido no canto superior esquerdo de uma caixa de gradiente

background-image: radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

No exemplo de farthest-side a seguir, o tamanho do gradiente circular é determinado pelo lado direito da caixa de gradiente.

Grande gradiente circular de três cores que termina no lado direito da caixa de gradiente

background-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Gradientes recorrentes

O Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript também dão suporte a gradientes lineares e radiais recorrentes. A sintaxe de cada uma das propriedades do gradiente recorrente é idêntica a seu equivalente não recorrente.

A sintaxe básica do gradiente linear recorrente é a seguinte:

repeating-linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

FunçãoDescrição

repeating-linear-gradient()

Especifica um gradiente linear repetitivo especificando uma linha gradual e duas ou mais paradas de cor e deslocamentos.

Os valores possíveis para esta propriedade são as seguintes:

<angle>

Opcional. O ângulo que a linha gradual deve assumir, expresso como um número seguido de um designador de unidade de ângulo (por exemplo, "graus").

"0deg" aponta para cima e ângulos positivos aumentam no sentido horário. Portanto, "90deg" aponta para a direita, "180deg" aponta para baixo e assim por diante.

Se não é fornecido nenhum ângulo, a linha gradual começa no canto ou no lado oposto ao canto ou no lado especificado por <side-or-corner>.

<side-or-corner>

O valor opcional que especifica um canto ou lado final para o gradiente. Esse valor começa com "to", seguido de uma ou duas das palavras-chave a seguir. Uma palavra-chave incluída especifica um lado final e duas palavras-chave especificam um canto final.

  • Os valores a seguir podem ser usados somente como o primeiro valor:
    • left  Indica finais de gradiente à esquerda.
    • right  Indica finais de gradiente à direita.
  • Os valores a seguir podem ser usados somente como o segundo valor:
    • top  Indica finais de gradiente em cima.
    • bottom  Indica finais de gradiente em baixo.
  • Não incluir nenhuma palavra-chave ou ângulo é igual a "to bottom".
<color-stop>

São requeridas pelo menos duas paradas de cor. Cada parada de cor tem um ou dois componentes — um componente de cor e um componente de posição opcional.

O primeiro componente define o componente de cor de um ponto de parada para o gradiente. Cada ponto de parada tem sua própria cor designada e a área entre cada ponto é preenchida com uma transição de cor contínua de um até o outro. Este valor pode ser qualquer valor de cor compatível.

Cada ponto de parada pode ter uma porcentagem opcional ou um valor de comprimento compatível que indica onde na linha gradual deve ser colocada a parada de cor. "0%" (ou "0px", "0em" e assim por diante) indica o ponto (ou lado) inicial; "100%" indica o ponto (ou lado) final.

 

A sintaxe da função repeating-linear-gradient é idêntica à da função linear-gradient.

Depois de atingir a última parada de cor, o gradiente começa novamente na primeira parada de cor e se repete. É uma boa ideia especificar cores idênticas para a primeira e a última parada de cor para evitar mudanças de cor abruptas entre cada grupo que se repete.

Segue um exemplo de um gradiente linear repetitivo. Ele transiciona entre duas cores — azul e amarelo.

Imagem de um gradiente linear repetitivo de duas cores

background-image: repeating-linear-gradient(#00A3EF, #FFF133 30px, #00A3EF 50px);

A sintaxe básica do gradiente radial recorrente é a seguinte:

repeating-radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

FunçãoDescrição

repeating-radial-gradient()

Especifica um gradiente radial repetitivo definindo primeiro um ponto central, depois o tamanho e a forma (se for uma elipse) do círculo ou elipse final — ou 100% — e então as paradas de cor no meio, separadas por vírgulas.

Os valores possíveis da propriedade são estes:

<shape>

Valor opcional que especifica a forma final do gradiente. Se esse valor é omitido, a forma final é um círculo se o parâmetro size é um valor de comprimento único e, caso contrário, uma elipse.

  • ellipse  Indica que o gradiente está na forma de uma elipse.
  • circle  Indica que o gradiente está na forma de um círculo.
<size>

Valor opcional que especifica o tamanho da forma final do gradiente. Seus valores possíveis são dois valores de comprimento delimitados por espaço (ou porcentagens) ou uma das palavras-chave a seguir. Se esse valor é omitido, ele usa o padrão de farthest-corner.

  • <length(s)>  

    Um ou dois valores de comprimento delimitados por espaço.

    Se é especificado um valor de comprimento, ele indica o raio do círculo.

    Se dois valores (comprimento ou porcentagem) são especificados, o primeiro representa o raio horizontal e o segundo, o raio vertical.

    Os valores percentuais são relativos à dimensão correspondente da caixa de gradiente. As porcentagem podem ser usadas somente para especificar o tamanho de um gradiente elíptico, não um circular.

    Valores negativos são inválidos.

  • closest-side  Em gradientes circulares, esse valor indica que a forma final é um círculo, dimensionado para encontrar exatamente o lado da caixa mais próxima de seu centro. Em gradientes elípticos, a forma do gradiente é uma elipse dimensionada para encontrar exatamente os lados vertical e horizontal da caixa mais próxima a seu centro.
  • closest-corner  Dimensiona a forma do gradiente para que encontre exatamente o canto mais próximo da caixa de seu centro. Em gradientes elípticos, a forma do gradiente tem a mesma proporção entre largura e altura que se closest-side fosse especificado.
  • farthest-side  Similar a closest-side, exceto que a forma do gradiente é dimensionada para encontrar o lado da caixa-forte criptografada mais distante de seu centro (para gradientes circulares) ou os lados vertical e horizontal mais distantes (para gradientes elípticos).
  • farthest-corner  Dimensiona a forma do gradiente para ele encontrar exatamente o canto mais distante da caixa de seu centro. Em gradientes elípticos, a forma do gradiente tem a mesma proporção entre largura e altura que se farthest-side fosse especificado.
<position>

Valor opcional que especifica o centro do gradientes. Esse valor pode usar os mesmos valores que a propriedade background-position. Se esse valor é omitido, é usado o padrão de center.

<color-stop>

São necessárias pelo menos duas paradas de cor. Cada parada de cor tem um ou dois componentes — um componente de cor e um componente de posição opcional.

O primeiro componente define o componente de cor de um ponto de parada do gradiente. Cada ponto de parada tem sua própria cor designada, e a área entre cada ponto é preenchida com uma transição de cor contínua de um até o outro. Esse valor pode ser qualquer valor de cor compatível.

O segundo componente é um valor percentual ou decimal opcional que indica onde do raio do gradiente (semelhante a uma linha gradual em um linear-gradient, mas do centro para fora) deve ser colocada a parada de cor. "0%" indica o início do raio do gradiente e "100%" indica o ponto em que o raio do gradiente cruza a forma final. Por exemplo, um valor de "20%" indica que a parada de cor deve ser posicionada em um ponto a 20% do comprimento do raio do gradiente, a partir do início da linha. Os valores podem ser negativos, o que indica que a cor especificada para esse valor está na transição intermediária para a próxima cor no centro do gradiente, então a cor visível no centro está entre a cor especificada e a próxima cor. Os valores podem ser maiores que 100%, o que especifica um local a uma distância correspondentemente maior do centro do gradiente.

 

A sintaxe da função repeating-radial-gradient é idêntica à da função radial-gradient.

Depois de atingir a última parada de cor, o gradiente começa novamente na primeira parada de cor e se repete. É uma boa ideia especificar cores idênticas para a primeira e a última parada de cor para evitar mudanças de cor abruptas entre cada grupo que se repete.

A declaração a seguir cria um gradiente circular repetitivo.


background-image: repeating-radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Imagem de um gradiente circular repetitivo de três cores

A declaração a seguir cria um gradiente elíptico repetitivo.


background-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);


Imagem de um gradiente elíptico repetitivo de três cores

Referência de API

Gradients

Amostras e tutoriais

Exemplo de gradientes CSS

Demonstrações do Test Drive do Internet Explorer

Criador de tela de fundo em gradiente CSS
Irish Spring

Postagens no blog do IE

Gradientes CSS3 não prefixados no IE10
Levando a Web estável adiante no IE10 Release Preview
Gradientes CSS3 na visualização de plataforma 1 do IE10

Especificação

Módulo de Conteúdo Substituído e Valores de Imagem CSS3: Seção 4

 

 

Isso foi útil para você?
(1500 caracteres restantes)
Agradecemos os seus comentários
Mostrar:
© 2014 Microsoft. Todos os direitos reservados.