Materiais de gradiente explicados: seda, aurora, grão e mais

Os materiais de gradiente são o que faz um gradiente parecer algo, e não apenas uma mistura entre duas cores. Um material é a estrutura que a cor preenche: um brilho direcional na Seda, cortinas de luz na Aurora, manchas suaves no Mesh, areia na Areia, veios no mármore. Cada Mark do Gradiently empilha até três deles e depois acrescenta luz, grão e movimento, e é por isso que dois Marks com a mesma paleta podem não se parecer em nada.

O que é um material

Pensa na paleta como a tinta e no material como a superfície onde é aplicada. Despeja o mesmo azul-marinho, verde-azulado e laranja sobre seda, vidro fosco ou papel feito à mão e obténs três objetos diferentes. Num Mark, cada material vai buscar cores à paleta do próprio Mark, por isso mudar o material muda o carácter sem mudar as cores.

As catorze famílias de materiais

O Gradiently agrupa os materiais em famílias, conforme aquilo a que se assemelham. Os nomes abaixo são materiais reais que vais encontrar no Mercado; cada família tem muitos mais.

Seda, aurora e mesh

Estes três são os que mais perguntam. A Seda é um brilho direcional sobre fios finos: elegante, um pouco formal, à vontade em beleza e moda. A Aurora são cortinas de luz a subir de uma orla brilhante para um céu escuro, dramática sobre um fundo vazio. O Mesh são manchas suaves de cor que se fundem umas nas outras, o gradiente moderno clássico, simpático e versátil. Gradientes de seda, gradientes aurora e gradientes mesh têm cada um o seu guia, com CSS.

Grão, papel e impressão

A família Grão faz um ecrã parecer impresso. A Fibra é papel feito à mão, com fibras longas e uma ou outra mancha, o Riso é uma impressão a duas tintas, o Analógico é grão de película, o Dither escalona a cor em píxeis. Ficam bem em comida, artesanato, livros e tudo o que deva parecer feito à mão. Escondem também o banding, as listas que surgem em gradientes suaves, algo que gradientes granulados explica.

Como se empilham as camadas

Um Mark tem uma camada base e até duas por cima. Cada camada superior tem a sua opacidade e um modo de mistura (normal, ecrã, multiplicar, sobrepor ou suave), a mesma ideia das camadas num editor de fotografia. Uma receita comum é uma base ampla, como Mesh ou Névoa, para o campo de cor, uma camada estrutural, como Linho ou Retícula, para a textura, e uma camada de luz, como Halo ou Fuga de luz, para dar foco.

.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}

Luz, grão e movimento

Dentro de cada camada, um punhado de definições muda o comportamento do material: a escala, o quanto se deforma, quanto pormenor fino mostra, com que força é iluminado, quanto grão tem por cima e quanto se move. A mesma Seda pode ser um cintilar apertado e brilhante ou uma pendência larga e escura. O movimento é partilhado por todo o Mark, com a sua própria velocidade e deriva, para que as camadas se movam em conjunto e não umas contra as outras.

O pormenor e as palavras competem, e é por isso que os Marks suavizam sozinhos o pormenor carregado junto ao texto. Um Mark sabe onde estão as palavras: a sua zona mais calma passa para trás do texto e as cores junto às letras aprofundam-se ou aclaram-se, para que até um material texturado mantenha o teu título legível.

Como escolher um material

Pergunta de que é feita a tua marca. Uma pastelaria é farinha, papel e luz quente, por isso Fibra ou Aguada. Um estúdio que vende software é vidro e luz limpa, por isso Fosco ou Prisma. Depois pergunta com que frequência vais publicar sobre ele: quanto mais vezes, mais calmo deve ser. Como escolher o Mark certo percorre o resto da decisão, e o Mercado permite filtrar diretamente por material.