Modos de mistura

The CSS Podcast - 024: Blend Modes

O duotone é um tratamento de cor muito usado em fotografia que faz com que uma imagem pareça ser composta apenas por duas cores contrastantes: uma para realces e outra para sombras. Como fazer isso com CSS?

Usando modos de mesclagem e outras técnicas que você aprendeu, como filtros e pseudoelementos, é possível aplicar esse efeito a qualquer imagem.

O que é um modo de mesclagem?

Os modos de mesclagem são usados com frequência em ferramentas de design, como o Photoshop, para criar um efeito com a mistura de cores de duas ou mais camadas. Ao mudar a forma como as cores se misturam, você pode criar efeitos visuais muito interessantes. Também é possível usar os modos de mesclagem como um utilitário, como isolar uma imagem que tem um plano de fundo branco, para que pareça ter um plano de fundo transparente.

É possível usar a maioria dos modos de mesclagem disponíveis em uma ferramenta de design com CSS, usando as propriedades mix-blend-mode ou 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.

Use background-blend-mode quando tiver vários planos de fundo em um elemento e quiser que todos se misturem.

O mix-blend-mode afeta todo o elemento, incluindo os pseudoelementos. Um caso de uso é o exemplo inicial de uma imagem duotone, que tem camadas de cor aplicadas ao elemento pelos pseudoelementos.

Os modos de mesclagem 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 da mesma forma.

Compatibilidade com navegadores

mix-blend-mode

Browser Support

• 41
• 79
• 32
• 8

Source

background-blend-mode

Browser Support

• 35
• 79
• 30
• 8

Source

Modos de mistura separáveis

Normal

Esse é o modo de mesclagem padrão e não muda nada sobre como um elemento se mistura com outros.

Multiplicar

O modo de mesclagem multiply é como empilhar várias transparências uma sobre a outra. Os pixels brancos vão aparecer transparentes, e os pixels pretos vão aparecer pretos. Qualquer valor entre esses extremos vai multiplicar os valores de luminosidade (luz). Isso significa que as luzes ficam muito mais claras e escuras, mais escuras, produzindo, na maioria das vezes, um resultado mais escuro.

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

Tela

O uso de screen multiplica os valores de luz, um efeito inverso de multiply, e geralmente produz um resultado mais claro.

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

Sobreposição

Esse modo de mesclagem, overlay, combina multiply e screen. As cores escuras de base ficam mais escuras, e as cores claras de base ficam mais claras. Cores de gama média, como um cinza de 50%, não são afetadas.

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

Escurecer

O modo de mesclagem darken compara a imagem de origem e a luminosidade da cor escura da imagem de plano de fundo e seleciona a mais escura das duas. Isso é feito comparando valores RGB em vez de luminosidade (como multiply e screen fariam), para cada canal de cor. Com darken e lighten, novos valores de cor são criados com frequência com base nesse processo de comparação.

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

Clarear

O uso de lighten faz exatamente o oposto de darken.

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

Subexposição

Se você usar color-dodge, a cor de fundo vai ficar mais clara para refletir a cor de origem. Cores pretas puras não são afetadas por esse modo.

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

Superexposição

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

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

Luz direta

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 uma tela. Se estiver mais escuro, significa que o valor foi multiplicado.

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

Luz indireta

O modo de mesclagem soft-light é uma versão menos agressiva de overlay. Ele funciona da mesma forma, mas com menos contraste.

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

Diferença

Uma boa maneira de imaginar como o difference funciona é como um negativo de foto. O modo de mesclagem difference usa o valor de diferença de cada pixel, invertendo as cores claras. Se os valores de cor forem idênticos, eles vão ficar pretos. As diferenças nos valores serão invertidas.

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

Exclusão

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

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

Modos de mistura não separáveis

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

Hue

O modo de mesclagem hue usa a tonalidade da cor de origem e a aplica à saturação e luminosidade da cor de plano de fundo.

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

Saturação

Ele funciona como hue, mas usando saturation como o modo de mesclagem aplica a saturação da cor de origem ao matiz e à luminosidade da cor de plano de fundo.

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

Cor

O modo de mesclagem color vai criar uma cor com a tonalidade e a saturação da cor de origem e a luminosidade da cor de fundo.

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

Luminosidade

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

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

A propriedade isolation

Browser Support

• 41
• 79
• 36
• 8

Source

Se você definir a propriedade isolation para ter um valor de isolate, ela vai criar um novo contexto de empilhamento, o que vai impedir que ela se misture com uma camada de plano de fundo. Como você aprendeu no módulo de z-index, quando você cria um novo contexto de empilhamento, essa camada se torna a camada de base. Isso significa que os modos de mesclagem no nível pai não serão mais aplicados, mas os elementos dentro de um elemento com isolation: isolate definido ainda podem ser mesclados.

Isso 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 mesclagem

Quais das opções a seguir são modos de mesclagem do CSS?

Diferença

🎉

Clarear

🎉

Iluminar

Tente novamente.

Dullen

Tente novamente.

Multiplicar

🎉

Sobreposição

🎉

Se você quiser mesclar cores diferentes de maneiras diferentes, qual estilo de modo de mesclagem será necessário?

Separáveis

Esses modos de mesclagem têm efeitos direcionados ao canal de cores

Não separáveis

Tente de novo, os elementos não separáveis não são compatíveis com o canal de cores