Anotações sobre CSS Gradients do artigo do CSS-Tricks

css-gradients.md

CSS Gradients

Os exemplos de implementação estão disponíveis no CodePen em https://codepen.io/marcelgsantos/pen/EQRqKP.

• Pode-se definir o background com uma cor sólida ou gradiente.
• Recomenda-se a utilização de um gradiente ao invés de uma imagem.
• O gradiente é quando uma cor varia para outra.
• Pode-se controlar vários aspectos de um gradiente como a direção e os pontos de mudança da cor.
• Utiliza-se a propriedade background-color para definir uma cor sólida. Por exemplo: background-color: red.
• Utiliza-se a propriedade background-image para definir um gradiente. Por exemplo: background-image: linear-gradient(red, orange).
• A propriedade background (como shorthand) aceita tanto uma cor sólida quanto um gradiente.
• O tipo de gradiente mais comum é o linear-gradient().
• O eixo do gradiente pode ir de um lado para outro ou em um determinado ângulo.
• O valor padrão do eixo do gradiente é top-to-bottom.
• Pode-se utilizar cores nos formatos hexadecimal, nomeadas ou RGB, por exemplo.
• Utiliza-se o to para indicar o eixo do gradiente de forma textual. Por exemplo, to right, to top ou to top right.
• Utiliza-se o ângulo para indicar o eixo do gradiente também. Por exemplo, 45deg ou 180deg.
• Pode-se utilizar múltiplas cores em um gradiente. Por exemplo: background: linear-gradient(to right, red, #ffa500, rgb(255,255,0), green) utiliza quatro cores no gradiente.
• Pode-se definir o ínicio de cada uma das cores no gradiente. As posições de cada cor são chamadas de color-stops. Por exemplo: linear-gradient(to right, red, yellow 20%).
• Pode-se utilizar as color-stops para criar pedaços de cores sólidas. Por exemplo: linear-gradient(to right, yellow, yellow 10%, green 10%, green 20%, blue 20%).
• Outro tipo de gradiente bastante comum é o gradiente radial.
• O gradiente radial começa no centro e vai em direção das bordas do elemento.
• Utiliza-se radial-gradient() para definir um gradiente radial. Por exemplo: background: radial-gradient(yellow, orange).
• Em figuras não quadradas o gradiente radial fica com a forma de uma elipse.
• O valor padrão é ellipse como primeiro parâmetro de radial-gradient().
• Pode-se criar um gradiente radial com a forma circular. Por exemplo: background: radial-gradient(circle closest-side, yellow, orange).
• O comportamento do gradiente radial com a forma circular é ter a última cor terminando no lado mais distante, ou, farthest-side.
• O valores relacionados a forma circular podem ser closest-side, farthest-side, closest-corner e farthest-corner.
• Um gradiente radial não precisa iniciar necessariamente no centro do elemento.
• Pode-se definir o ponto inicial do gradiente radial utilizando at. Por exemplo, background: radial-gradient(circle at top right, yellow, red).
• Existe uma especificação para gradiente cônico porém sem implementação nos navegadores atuais.
• Os gradientes repetíveis podem ser utilizados tanto com o gradiente linear quanto com o gradiente radial.
• Existe um truque para criar padrões com gradientes no CSS com linear-gradient() e radial-gradient().
• Atualmente não é necessário recorrer a esse truque devido a existência do repeating-linear-gradient().
• O tamanho do gradiente é determinado pela color-stop final.
• Utiliza-se repeating-linear-gradient() para criar gradientes repetíveis lineares. Por exemplo: background: repeating-linear-gradient(yellow, yellow 10px, red 10px, red 20px).
• Utiliza-se repeating-radial-gradient() para criar gradientes repetíveis radiais. Por exemplo: background: repeating-radial-gradient(circle at 0 0, #eee, #ccc 50px).

Referências

• https://tympanus.net/codrops/css_reference/linear-gradient
• https://tympanus.net/codrops/css_reference/radial-gradient