Podcast The CSS - 024: modos de combinação (link em inglês)
O Duotone é um tratamento de cor conhecido para fotografia, que faz com que uma imagem pareça ser composta apenas de duas cores contrastantes: uma para realces e outra para pouca luz. Mas como fazer isso com CSS?
Usando modos de combinação e outras técnicas que você aprendeu, como filtros e pseudoelementos, é possível 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. Mudando a forma como as cores se misturam, você consegue efeitos visuais realmente interessantes. Você também pode usar modos de combinação como um utilitário, como isolar uma imagem que tem um plano de fundo branco para que ela pareça ter um segundo plano transparente.
É possível usar a maioria dos modos de combinação disponíveis em uma ferramenta de design com CSS,
usando as propriedades
mix-blend-mode ou
background-blend-mode.
A mix-blend-mode aplica a mesclagem a um elemento inteiro,
e a 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 mesclem.
O mix-blend-mode afeta todo o elemento,
incluindo os pseudoelementos.
Um caso de uso é o exemplo inicial de uma imagem em duotone,
que tem camadas de cores aplicadas ao elemento usando pseudoelementos.
Os modos de combinação se enquadram em duas categorias: separáveis e não separáveis. Um modo de combinação separável considera cada componente de cor, como RGB, individualmente. Um modo de mistura 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.
Os pixels brancos vão aparecer transparentes
e os pixels pretos vão aparecer em preto.
Qualquer valor intermediário multiplicará os valores de luminosidade (luz).
Isso significa que as luzes ficam muito mais claras, mais escuras
e mais escuras, produzindo um resultado mais escuro.
.my-element {
mix-blend-mode: multiply;
}
Screen
O uso de screen multiplica os valores de light, um efeito inverso a multiply,
e geralmente produz um resultado mais claro.
.my-element {
mix-blend-mode: screen;
}
Sobreposição
Esse modo de combinação (overlay) combina multiply e screen.
As cores escuras básicas ficam mais escuras e as cores claras ficam mais claras.
As cores de 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 luminosidade da cor escura da imagem de origem e da imagem do pano de fundo
e seleciona a mais escura das duas.
Ela 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 com base nesse processo de comparação.
.my-element {
mix-blend-mode: darken;
}
Clarear
Usar lighten faz o exato oposto de darken.
.my-element {
mix-blend-mode: lighten;
}
Desvio de cor
Se você usar color-dodge, a cor do plano de fundo vai clarear para refletir a cor da origem.
Cores pretas puras não têm efeito neste 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 destaques reduzidos.
.my-element {
mix-blend-mode: color-burn;
}
Luz intensa
Usar hard-light cria um contraste vívido.
Este modo de combinação filtra ou multiplica os valores de luminosidade.
Se o valor do pixel for mais claro que 50% de cinza, a imagem será iluminada,
como se fosse filtrada. Se for mais escuro, ele será multiplicado.
.my-element {
mix-blend-mode: hard-light;
}
Luz suave
O modo de mesclagem soft-light é uma versão menos áspera de overlay.
Funciona de forma muito semelhante com menos contraste.
.my-element {
mix-blend-mode: soft-light;
}
Diferença
Uma boa forma de entender 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 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.
No entanto, em vez de retornar preto para pixels idênticos,
ele 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 combinação como componentes color HSL. Cada um recebe 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 a tonalidade da cor de origem
e a 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 o modo de mesclagem aplica a saturação da cor de origem
à matiz e à luminosidade da cor do pano de fundo.
.my-element {
mix-blend-mode: saturation;
}
Cor
O modo de mistura color criará uma cor com base na matiz e na saturação da cor de origem
e da 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 que a propriedade isolation
tenha um valor isolate,
ela vai criar um novo contexto de empilhamento,
o que vai impedir que ela se misture com uma camada de pano de fundo.
Como você aprendeu no módulo Z-index, quando você cria um novo contexto de empilhamento,
essa camada se torna a camada de base.
Isso significa que os modos de combinação no nível do pai não serão mais aplicados,
mas os elementos dentro de um elemento com isolation: isolate definido ainda poderão ser mesclados.
Isso não funciona com background-blend-mode
porque a propriedade em segundo plano já está isolada.
Teste seu conhecimento
Teste seus conhecimentos sobre modos de combinação
Quais das opções abaixo são modos de combinação de CSS?
Se você quiser misturar cores diferentes de maneiras diferentes, qual estilo de modo de mesclagem precisará?