Gradiente linear das CSS3

Introdução

O Módulo das CSS3 denominado CSS Image Values and Replaced Content Module Level 3 (em tradução livre: Módulo CSS3 dos valores CSS para imagens e conteúdos substituídos) encontra-se no estágio de Candidata a Recomendação do W3C. É esse Módulo que define, entre outras, as funcionalidades para a criação de gradientes CSS.

Replaced Contente (conteúdos substituídos) são os conteúdos gerados por elementos da marcação HTML que não seguem o modelo de formatação das CSS, isto é, sua aparência e dimensões são pré-definidas e independem das CSS.

Um exemplo de elemento que gera conteúdo substituído é o elemento img para inserção de imagens. O conteúdo desse elemento é renderizado com sua aparência e dimensões intrínsecas sem que seja necessário definir-se regras CSS para ele.

Outros elementos da HTML que geram conteúdo substituído são: br, hr, select, input, textarea, object e video.

A parte das especificações que trata dos gradientes lineares das CSS3 é aquela dedicada aos valores CSS para imagens e são esses tipos de gradientes que estudaremos nesse tutorial.

Definição

A definição técnica formal de gradiente encontra-se na matemática, mais precisamente, no cálculo vetorial. Não é do escopo deste tutorial entrar em detalhes sobre gradientes vetoriais da matemática.

No contexto das CSS usou-se de forma genérica o termo gradiente para se referir a gradiente de cores (degradê).

Feita a ressalva, define-se gradiente CSS como sendo uma transição de cores em um determinado espaço. Com uso de declarações CSS é possível ao autor definir se a transição será linear ou radial, em que quantidade de espaço será feita, bem como se duas ou mais cores participam do gradiente.

Gradientes são imagens

Um conceito importante que precisa ficar bem claro desde o início do estudo de gradientes é que a função gradiente das CSS destina-se a criar imagens. Assim, gradientes são valores para as propriedade CSS que admitem uma imagem como valor, por exemplo: as propriedades CSS background-image, list-style-image, border-image e mask-image.

Uma imagem, do tipo JPG por exemplo, tem suas dimensões próprias (ou intrínsecas). Gradientes são um tipo de imagem cujas dimensões intrínsecas são infinitas. Quando se usa um gradiente como imagem ele assume as dimensões do elemento ao qual é aplicado, dimensões estas que criam o que se denomina box gradiente. Então podemos afirmar que ao aplicar um gradiente como imagem de fundo a um box na verdade estamos usando uma porção do gradiente com dimensões iguais às dimensões do box ao qual foi aplicado. Veremos adiante que são as declarações CSS que determinam qual a porção do gradiente usar.

Dimensões padrão de um objeto é, também, um conceito importante para o entendimento de gradientes CSS. E, nada melhor do que um exemplo prático para ilustrar esse conceito. Quais são as dimensões do box gradiente para o bullet (marcador) de um item de lista? ou, qual o tamanho da imagem do bullet definido com uso de gradiente para a propriedade list-style-image? O marcador terá dimensões infinitas?

O Modelo CSS prevê que marcadores de lista devem ser inseridos em um box com dimensões de 1em x 1em. Essas são as dimensões padrão do objeto marcador de lista e é nesse box que o gradiente será inserido.

Observe o exemplo a seguir mostrando que o tamanho do marcador do item da lista (1em x 1em) depende do tamanho da fonte do elemento li (item de lista).

Gradientes CSS podem ser de dois tipos: gradientes lineares e gradientes radiais. Neste tutorial estudaremos os gradientes lineares.

Gradiente linear

Diz-se que um gradiente é linear quando a transição das cores se faz segundo um eixo (linha reta) que possui um sentido (por exemplo: horizontal) e uma direção (por exemplo: da esquerda para a direita).

No exemplo a seguir mostramos um gradiente da cor azul para a cor amarela na direção da esquerda para a direita e segundo um eixo no sentido horizontal.

A sintaxe CSS para a função gradiente linear é mostrada a seguir.

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

<side-or-corner> = [left | right] || [top | bottom]

Vamos "traduzir" a sintaxe mostrada e entender como escrever uma regra CSS para criar gradientes lineares.

Linha do gradiente

O primeiro parâmetro da função define a linha do gradiente (trata-se de um vetor), ou seja, define a direção e o sentido da transição das cores. Esse parâmetro admite nenhum ou um valor que pode ser: um ângulo (expresso em medida CSS: deg, grad, rad, turn) ou uma das seguintes palavras-chave: to right, to left, to top, to bottom, to top left, to top right, to bottom left, to bottom right. Se não for declarado um valor para esse parâmetro ele assume o valor padrão que é a palavra-chave to-bottom.

O início da contagem dos ângulos ou seja, o valor 0deg define a direção vertical e o sentido de baixo para cima. A transição de cores se dá de baixo para cima.
Ângulos positivos são contados no sentido horário, assim 90deg define uma transição de cores na horizontal, da esquerda para a direita. Ângulos negativos são contados no sentido anti-horário, assim -270deg define uma transição de cores na vertical, de cima para baixo.

Palavras-chave definem a linha do gradiente conforme mostrado a seguir.

• to right → transição de cores na horizontal da esquerda para a direita;
• to left → transição de cores na horizontal da direita para a esquerda;
• to top → transição de cores na vertical de baixo para cima;
• to bottom → transição de cores na vertical de cima para baixo;
• to top left → transição de cores a partir do canto superior esquerdo em direção ao centro;
• to top right → transição de cores a partir do canto superior direito em direção ao centro;
• to bottom left → transição de cores a partir do canto inferior esquerdo em direção ao centro;
• to bottom right → transição de cores a partir do canto inferior direito em direção ao centro.

Observe na figura a seguir alguns exemplos de transição de cores segundo um ângulo CSS e uma palavra-chave..

A linha do gradiente passa pelo centro do box no qual o gradiente é aplicado. A transição de cores se faz na direção e sentido da linha do gradiente. Para cada lado da linha do gradiente as cores são simétricas. O início e o fim da cor se dá na perpendicular à linha do gradiente que passa pelo canto mais próximo do box . A imagem mostrada a seguir esclarece a transição de cores de verde para vermelha segundo um ângulo de +160deg para definir a linha do gradiente.

Cores do gradiente

O segundo parâmetro da função define as cores do gradiente e a posição na linha do gradiente onde a cor começa.

A sintaxe geral para o segundo parâmetro é conforme mostrado a seguir.

<color-stop>[, <color-stop>]+

onde

<color-stop> = <color> [ <percentage> | <length> ]?

A expressão regular que define a sintaxe mostrada nos diz que para criar um gradiente é necessário que se declare no mínimo duas cores. Opcionalmente podemos definir os pontos na linha de gradiente onde começa cada cor com uso de uma unidade de medida de comprimento CSS ou porcentagem, isto é, o parâmetro <color-stop> define a cor e opcionalmente o ponto de início da cor.

A especificação prevê que se não forem definidos os pontos de início de cada cor, eles serão calculados de modo a que a transição de cores se faça uniformemente por toda a extensão da linha do gradiente, com as extremidas preenchidas com a respectiva cor sólida.

Exemplos

Vejamos alguns exemplos que ilustram a sintaxe para aplicação de gradientes lineares.

Nota: Em todos os exemplos que ilustram os gradientes lineares, salvo indicação contrária, usaremos o seguinte template.

• um box retangular com largura igual a 500px e altura igual a 8em ou um box quadrado de 200 x 200px dependendo do exemplo;
• salvo indicação contrária, uma cor de fundo azul (background-color: blue;) como fallback para navegadores que não suportam gradientes;

Assim o template das CSS para os exemplos terá o seguinte formato

div {
  width:500px; /* box retangular */
  height:8em;  /* box retangular */
/* ou */
  width:200px; /* box quadrado */
  height:200px;  /* box quadrado */
  background-color: blue;
  background-image: linear-gradient( /* parâmetros */ );
}

Gradiente linear — exemplo 1

div { background-image: linear-gradient( to right, red, green, yellow, blue ); }

• to right → transição de cores na horizontal da esquerda para a direita;
• red, green, yellow, blue → gradiente constituído de quatro cores;

Uma vez que não foram definidos os pontos de início das cores a transição será na ordem em que as cores foram declaradas. Notar que as quatro cores declaradas têm sua matiz sólida em 0, 1/3, 2/3 e 1/1 do comprimento do box.

Gradiente linear — exemplo 2

Neste exemplo mostramos o efeito de se declarar um valor para o parâmetro <color-stop>. Definimos um ponto na linha do gradiente localizado na metade da largura do box (50%). Nesse ponto começa a transição da cor vermelha para a próxima cor declarada (verde).

As cores seguintes têm suas transições realizadas na segunda metade do box.

Talvez você esteja perguntando por que o fundo do box não é transparente antes dos 50%, pois de acordo com a sintaxe para gradientes esse é o ponto onde começa a cor vermelha.

Lembre-se que gradientes têm dimensões infinitas. Assim sendo as cores sólidas das extremidades laterais se prolongam infinitamente para fora do box. As cores se prolongam também para cima e para baixo até o infinito.

div { background-image: linear-gradient( to right, red 50%, green, yellow, blue ); }

Gradiente linear — exemplo 3

Neste exemplo mostramos o efeito de se declarar um valor negativo para o parâmetro <color-stop>. Definimos um ponto na linha do gradiente localizado à esquerda do box distante 20% da sua largura. O ponto de transição da cor vermelha para a próxima cor declarada (verde) começa 20% fora do box e à esquerda. Assim quando a cor vermelha "entra" no box ela já sofreu transição.

div { background-image: linear-gradient( to right, red -20%, green, yellow, blue ); }

Gradiente linear — exemplo 4

Neste exemplo declaramos um valor igual a 50% para o parâmetro <color-stop> da cor vermelha e 90% para a cor verde. Observe que a transição da cor vermelha começa nos 50% até atingir a cor verde sólida nos 80%. As cores amarela e azul têm sua transição nos 20% restantes.

div { background-image: linear-gradient( to right, red 50%, green 90%, yellow, blue ); }

Gradiente linear — exemplo 5

Neste exemplo declaramos o mesmo valor (25%) para duas cores contíguas. Isso faz com que não haja transição entre as duas cores.

div { background-image: linear-gradient( to right, red 25%, green 25%, yellow, blue ); }

Gradiente linear — exemplo 6

Neste exemplo mostramos como distribuir as cores sem que haja transições entre elas.

div { background-image: linear-gradient( to right, red 25%, green 25%, green 70%, yellow 70%, yellow 80%, blue 80%, blue ); }

Gradiente linear — exemplo 7

Se você declarar a cor transparent em um gradiente ela entrará normalmente na transição de cores revelando o fundo do box. Nesse exemplo declaramos a cor preta para o fundo do box e a cor transparent para fazer parte da transição do gradiente.

div { 
    background-color: black;
    background-image: linear-gradient( to right, red, transparent, blue ); 
}

Gradiente linear — exemplo 8

Este exemplo é idêntico ao anterior, mas fizemos uso da funcionalidade das CSS3 para múltiplos backgrounds colocando uma imagem de fundo repetida que foi revelada graças a transparência do gradiente.

div { 
    background-color: transparent;
    background-image:  linear-gradient( to right, red, transparent, blue ), url(../avatares/maujor82x82.jpg) center repeat-x; 
}

Gradiente linear — exemplo 9

Neste exemplo mostramos o uso de ângulos expressos em suas diferentes unidades de medida CSS para criar um gradiente.

As unidades de medida para ângulo válidas nas CSS estão relacionadas a seguir

• deg → graus, uma volta completa mede 360 graus;
• grad → grados, uma volta completa mede 400 grados;
• rad → radianos, uma volta completa mede 2π radianos (3.1416rad);
• turn → volta, uma volta completa mede 1 turn;

div1 { background:  linear-gradient( 45deg, red, green, yellow, blue ); }
div2 { background:  linear-gradient( -110grad, red, green, yellow, blue ); }
div3 { background:  linear-gradient( 4.5rad, red, green, yellow, blue ); }
div4 { background:  linear-gradient( -0.2turn, red, green, yellow, blue ); }

Gradiente linear — exemplo 10

Neste exemplo aplicamos os conceitos estudados anteriormente para mostrar quatro casos de aplicação de gradientes lineares.

div1 { background:  linear-gradient( red 50px, green 50px, green 100px, yellow 100px, yellow 150px, blue 150px); }
div2 { background:  linear-gradient( -110grad, red, green, yellow, blue ); }
div3 { background:  linear-gradient( 4.5rad, red, green, yellow, blue ); }
div4 { background:  linear-gradient( -0.2turn, red, green, yellow, blue ); }

Gradiente linear — exemplo 11

Para criar este exemplo buscamos inspiração na capa padrão do perfil dos usuários do Google+.

div { 
	width: 500px;
	padding-top: 280px;
	background-image: linear-gradient( 115deg, #001669, #007296 1%, #007296 11%, #015673 15%, 
    #000 23.57%, transparent 23.57%, transparent 100% ),
	
    linear-gradient( 109deg, transparent, #2d8427 23.57%, #205a06 41%, #000 45%,
	transparent 45%, transparent 100% ),
	
    linear-gradient( 109deg, transparent, #e79a07 45%, #e79a07 50%, #e79a07 52%, 
    #444 55%, transparent 45%, transparent 100% ),
	
    linear-gradient( 109deg, transparent, #288ab1 55%, #288ab1 68%,  #000 73%, 
    transparent 73%, transparent 100% ),
	
    linear-gradient( 109deg, transparent, #de491e 73%, #de491e 100% );
}

Observe a seguir um screenshot da imagem da capa padrão do Google+

Consolide o que você aprendeu

A seguir uma interface interativa simples para você visualizar como se desenvolve a transformação de cores em um gradiente linear quando se define uma linha de gradiente. Você pode experimentar com no mínimo duas e no máximo seis cores em sequência pré-definida.

Linha do gradiente

Escolha como deseja definir a linha do gradiente.

Cores do gradiente

Escolha no mínimo duas cores para o gradiente.

vermelha verde salmon azul laranja preta

Suporte

A função gradiente é muito bem suportada pelos navegadores modernos. Usar ou não prefixos proprietários depende dos navegadores aos quais você pretende servir gradientes.

Quer saber se um determinado navegador suporta esta funcionalidade? Consulte o oráculo do suporte em https://caniuse.com/#feat=css-gradients (link abre em nova janela).

Neste tutorial mostrei e comentei os fundamentos para criação de gradientes lineares. Bons estudos e ótimas experiências com gradientes lineares.

Compartilhe essa matéria com seus amigos