Blend modes

No Laboratório Belavista, o cartaz duotone mistura a foto da tipografia com duas tintas. Blend modes misturam cores de camadas, como no editor gráfico.

O exemplo está em pacote de exemplos/49-blend-modes/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• mix-blend-mode no elemento inteiro.
• background-blend-mode entre camadas de fundo.
• Alguns modos comuns: multiply, screen, overlay, difference.
• Isolar um grupo com isolation: isolate.

mix-blend-mode

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Blend — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <figure class="duotone">
      <img src="tipos.svg" width="320" height="200" alt="Caixa de tipos móveis fictícia">
      <figcaption>Cartaz em duas tintas</figcaption>
    </figure>
  </body>
</html>

.duotone {
  position: relative;
  max-width: 20rem;
  background: #1a3a4a;
  isolation: isolate;
}
.duotone img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: luminosity;
}
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #c45c26;
  mix-blend-mode: multiply;
  pointer-events: none;
}

Mude uma coisa. Troque multiply por screen. Preveja um resultado mais claro. Recarregue. Confira.

background-blend-mode

Quando há várias imagens/cores de fundo no mesmo elemento, background-blend-mode mistura essas camadas entre si (não com os irmãos da página).

.papel {
  background-image:
    linear-gradient(#c45c26, #1a3a4a),
    url("textura.svg");
  background-blend-mode: multiply;
  background-size: cover;
}

isolation

isolation: isolate cria um grupo de empilhamento: o blend do filho não “vaza” para o fundo da página inteira. Sem isso, multiply pode escurecer o body sem querer.

Erro comum: aplicar mix-blend-mode no texto e perder contraste. Sempre confira leitura e foco.

Modos que você vai ver mais

• multiply — escurece (tinta sobre papel claro).
• screen — clareia.
• overlay / soft-light — contraste pictórico.
• luminosity — mantém a luminância da imagem e pega a cor de baixo (útil em duotone).

Não precisa memorizar todos. No Belavista, teste dois ou três no ::after e compare.

Arquivo no disco. Teste em 127.0.0.1.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Quando usar mix-blend-mode e quando background-blend-mode?
2. Para que serve isolation: isolate no .duotone?
3. pointer-events: none no ::after evita o quê?

Respostas comentadas

1. mix mistura o elemento com o que está atrás na pilha; background-blend mistura só as camadas de background do mesmo elemento.
2. Limitar o efeito de blend ao cartaz, sem misturar com o resto do documento.
3. Que a camada de tinta bloqueie cliques na imagem ou no caption.