Modos de mistura

Podcast do CSS - 024: modos de mistura

O Duotone é um tratamento de cor muito usado em fotografias que faz com que a imagem pareça ter apenas duas cores contrastantes: uma para realces e outra para pontos fracos. Mas como fazer isso com CSS?

Usar modos de combinação (e outras técnicas que você aprendeu) como filtros e pseudoelementos. Você pode aplicar esse efeito a qualquer imagem.

O que é um modo de combinação?

Os modos de mistura são comumente usados em ferramentas de design como o Photoshop para criar um efeito de composição misturando cores de duas ou mais camadas. Ao mudar a forma como as cores se misturam, você pode criar efeitos visuais muito interessantes. Os modos de combinação também podem ser usados, como isolar uma imagem com fundo branco, para que pareça ter um fundo transparente.

Você pode usar a maioria dos modos de combinação disponíveis em uma ferramenta de design com CSS, usando o mix-blend-mode ou as background-blend-mode. O mix-blend-mode aplica a mesclagem a um elemento inteiro. e o background-blend-mode aplica a mesclagem ao plano de fundo de um elemento.

Você usa background-blend-mode quando tem vários planos de fundo em um elemento. e quer que todos se misturem uns com os outros.

O mix-blend-mode afeta o elemento inteiro, incluindo seus pseudoelementos. Um caso de uso é no exemplo inicial de uma imagem duotone, que tem camadas de cores aplicadas ao elemento por meio de seus pseudoelementos.

Os modos de combinação se dividem em duas categorias: separáveis e não separáveis. Um modo de mesclagem separável considera cada componente de cor, como RGB, individualmente. Um modo de mesclagem não separável considera todos os componentes de cor igualmente.

Compatibilidade com navegadores

mix-blend-mode

background-blend-mode

Modos de combinação separáveis

Normal

Esse é o modo de combinação padrão e não muda nada na forma como um elemento se mistura com outros.

Multiplicar

O modo de mesclagem multiply é como empilhar várias transparências umas sobre as outras. Pixels brancos serão transparentes, e pixels pretos aparecerão em preto. Qualquer valor intermediário multiplicará os valores de luminosidade (luz). Isso significa que as luzes ficam muito mais claras e escuras, mais escuros e, na maioria das vezes, produzindo um resultado mais escuro.

.my-element {
  mix-blend-mode: multiply;
}

Screen

O uso de screen multiplica os valores de light, um efeito inverso para multiply, e, na maioria das vezes, produzirão um resultado mais brilhante.

.my-element {
  mix-blend-mode: screen;
}

Sobreposição

Este modo de combinação (overlay) combina multiply e screen. As cores escuras de base ficam mais escuras e as claras ficam mais claras. As cores do intervalo médio, como cinza 50%, não são afetadas.

.my-element {
  mix-blend-mode: overlay;
}

Escurecer

O modo de combinação darken compara a imagem de origem e a luminosidade da cor escura da imagem do pano de fundo e seleciona o mais escuro dos dois. Ele faz isso comparando valores de RGB em vez de luminosidade (como multiply e screen fariam), para cada canal de cor. Com darken e lighten, novos valores de cor geralmente são criados usando esse processo de comparação.

.my-element {
  mix-blend-mode: darken;
}

Lighten

Usar lighten faz exatamente o oposto de darken.

.my-element {
  mix-blend-mode: lighten;
}

Esquiva de cor

Se você usar color-dodge, a cor do plano de fundo será clareada para refletir a cor de origem. Cores de preto puro não geram efeito nesse modo.

.my-element {
  mix-blend-mode: color-dodge;
}

Queima de cor

O modo de combinação color-burn é muito semelhante ao modo de combinação multiply, mas aumenta o contraste, resultando em tons médios mais saturados e realces reduzidos.

.my-element {
  mix-blend-mode: color-burn;
}

Luz forte

O uso de hard-light cria um contraste vívido. Esse modo de mesclagem filtra ou multiplica os valores de luminosidade. Se o valor do pixel for mais claro que 50% de cinza, a imagem será clareada, como se fosse filtrada. Se for mais escuro, o valor será multiplicado.

.my-element {
  mix-blend-mode: hard-light;
}

Luz suave

O modo de combinação soft-light é uma versão menos rigorosa de overlay. Funciona da mesma forma, com menos contraste.

.my-element {
  mix-blend-mode: soft-light;
}

Diferença

Uma boa maneira de entender como o difference funciona é como um negativo de foto. O modo de combinação difference usa o valor da diferença de cada pixel, invertendo as cores da luz. Se os valores das cores forem idênticos, eles se tornarão pretos. As diferenças nos valores serão invertidas.

.my-element {
  mix-blend-mode: difference;
}

Exclusão

O uso de exclusion é muito semelhante a difference, mas, em vez de retornar preto para pixels idênticos, ela retornará 50% de cinza, resultando em uma saída mais suave e com menos contraste.

.my-element {
  mix-blend-mode: exclusion;
}

Modos de combinação não separáveis

Pense nesses modos de mesclagem como componentes de cor HSL. Cada pega um valor de componente específico da camada ativa e o mistura com outros valores de componente.

Hue

O modo de combinação hue usa o matiz da cor de origem e o aplica à saturação e luminosidade da cor do pano de fundo.

.my-element {
  mix-blend-mode: hue;
}

Saturação

Isso funciona como hue, mas usar saturation como modo de combinação aplica a saturação da cor de origem à tonalidade e luminosidade da cor do pano de fundo.

.my-element {
  mix-blend-mode: saturation;
}

Cor

O modo de mesclagem color cria uma cor com base na matiz e na saturação da cor de origem e a luminosidade da cor do pano de fundo.

.my-element {
  mix-blend-mode: color;
}

Luminosidade

Por fim, luminosity é o inverso de color. Ele cria uma cor com a luminosidade da cor de origem e o matiz e a saturação da cor do pano de fundo.

.my-element {
  mix-blend-mode: luminosity;
}

A propriedade isolation

Se você definir o isolation tenha um valor de isolate, isso vai criar um novo contexto de empilhamento, o que evitará que ela se misture com a camada do pano de fundo. Como você aprendeu no módulo Z-index, ao criar um novo contexto de empilhamento, essa camada se torna a base. Isso significa que os modos de combinação no nível dos pais não serão mais aplicados, mas os elementos dentro de outro com isolation: isolate definido ainda podem se misturar.

Esse recurso não funciona com background-blend-mode. porque a propriedade de segundo plano já está isolada.

Teste seu conhecimento

Teste seus conhecimentos sobre modos de combinação