Podcast do CSS - 021: Gradientes
Imagine que você queira criar um site e, no topo, há uma introdução com um título, um resumo e um botão. O designer entregou um design com fundo roxo para esta introdução. O único problema é que o plano de fundo tem dois tons de roxo como gradiente. Como fazer isso?
Você pode pensar inicialmente que, para isso,
precisará exportar uma imagem da ferramenta de design,
mas é possível usar
linear-gradient
como alternativa.
Um gradiente é uma imagem e pode ser usado em qualquer lugar onde imagens possam ser usadas, mas é criada com CSS e composta de cores, números e ângulos. Os gradientes CSS permitem criar qualquer coisa, desde um gradiente suave entre duas cores, até obras de arte impressionantes, misturando e repetindo vários gradientes.
Gradiente linear
O linear-gradient()
gera uma imagem de duas ou mais cores, progressivamente.
Ele usa vários argumentos, mas, na configuração mais simples,
você pode passar algumas cores como esta e ele irá dividi-las automaticamente de maneira uniforme enquanto as mistura.
.my-element {
background: linear-gradient(black, white);
}
Você também pode passar um ângulo ou palavras-chave que representem um ângulo.
Se você quiser usar palavras-chave, especifique uma direção após a palavra-chave to
.
Isso significa que, se você quer um gradiente em preto e branco,
que vai da esquerda (preta) para a direita (branca),
especifique o ângulo como to right
como o primeiro argumento.
.my-element {
background: linear-gradient(to right, black, white);
}
Um valor de parada de cor definido em que uma cor para e se mistura com as vizinhas. Para um gradiente que começa com um tom escuro de vermelho em um ângulo de 45deg, quando 30% do tamanho do gradiente muda para um vermelho mais claro: o resultado fica assim.
.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}
Você pode adicionar quantas cores e paradas de cor quiser em um linear-gradient()
,
e você pode colocar gradientes em cima uns dos outros, separando cada gradiente com uma vírgula.
Gradiente radial
Para criar um gradiente que irradie de forma circular, o
radial-gradient()
função entra para ajudar.
É semelhante a linear-gradient()
,
Porém, em vez de um ângulo, é possível especificar uma posição e uma forma final.
Se você apenas especificar cores, o radial-gradient()
selecionará automaticamente a posição como center
.
e selecione um círculo ou uma elipse, dependendo do tamanho da caixa.
.my-element {
background: radial-gradient(white, black);
}
A posição do gradiente é semelhante a background-position
, usando palavras-chave e/ou valores numéricos.
O tamanho do gradiente radial determina o tamanho da forma final do gradiente
(círculo ou elipse) e, por padrão, será farthest-corner
,
o que significa que ela se encontra exatamente
no canto mais distante da caixa do centro.
Você também pode usar as seguintes palavras-chave:
- O
closest-corner
vai encontrar o canto mais próximo do centro do gradiente. closest-side
vai encontrar o lado da caixa mais próximo do centro do gradiente.farthest-side
vai fazer o oposto declosest-side
.
Você pode adicionar quantas paradas de cor quiser, assim como com o linear-gradient
.
Da mesma forma, você também pode adicionar quantas radial-gradients
quiser.
Gradiente cônico
Um gradiente cônico tem um ponto central na caixa e começa do topo (por padrão), e gira em torno de um círculo de 360 graus.
.my-element {
background: conic-gradient(white, black);
}
O conic-gradient()
aceita argumentos de posição e ângulo.
Por padrão, o ângulo é 0 grau, começando no topo, no centro.
Se você definir o ângulo como 45deg
, ele será o canto superior direito.
O argumento angle aceita qualquer tipo de valor de ângulo, como os gradientes lineares e radiais.
A posição é centralizada por padrão. Assim como nos gradientes radiais e lineares, o posicionamento pode ser baseado em palavras-chave, ou pode ser definida com valores numéricos.
Você pode adicionar quantas paradas de cor desejar, como acontece com outros tipos de gradiente. Um bom caso de uso para esse recurso, com gradientes cônicos, é a renderização de gráficos de pizza com CSS.
Repetição e combinação
Cada tipo de gradiente também tem um tipo repetido.
São
repeating-linear-gradient()
,
repeating-radial-gradient()
e
repeating-conic-gradient()
.
Elas são semelhantes às funções não repetitivas e têm os mesmos argumentos.
A diferença é que, se o gradiente definido puder ser repetido para preencher a caixa,
com base no tamanho deles,
Se o gradiente não parecer se repetir,
você provavelmente não definiu um comprimento para uma das paradas de cor.
Por exemplo:
é possível criar um plano de fundo listrado com uma repeating-linear-gradient
definindo o comprimento das paradas de cor.
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
Também é possível misturar funções de gradiente em propriedades background
,
além de definir quantos gradientes quiser,
como você faria com uma imagem de plano de fundo.
Por exemplo, é possível misturar vários gradientes lineares ou dois gradientes lineares com um gradiente radial.
Recursos
- Conic.css: uma coleção útil de gradientes cônicos
- Guia do MDN para gradientes
- Gerador de gradiente
Teste seu conhecimento
Teste seu conhecimento sobre gradientes
Qual é o número mínimo de cores necessárias para criar um gradiente?
Os elementos podem ter vários gradientes no plano de fundo?