Podcast do CSS - 024: modos de combinação (em inglês)
O Duotone (link em inglês) é 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 é o 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ê pode conseguir efeitos visuais muito interessantes. Você também pode usar modos de combinação como um utilitário, como isolar uma imagem que tem um fundo branco, de modo 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 misturem.
O mix-blend-mode afeta todo o elemento,
incluindo os pseudoelementos dele.
Um caso de uso é no exemplo inicial de uma imagem com dois tons,
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 mistura 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 combinação multiply é como empilhar várias transparências.
Pixels brancos vão aparecer transparentes
e pixels pretos vão aparecer pretos.
Qualquer termo nos meios multiplicará os valores de luminosidade (luz).
Isso significa que as luzes ficam muito mais claras, mais escuras
e mais escuras. Na maioria das vezes, elas produzem 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, na maioria das vezes, 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 do intervalo médio, como 50% cinza, 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.
Isso é feito comparando valores RGB em vez da luminosidade, como multiply e screen fariam,
para cada canal de cor.
Com darken e lighten, novos valores de cor costumam ser criados a partir desse processo de comparação.
.my-element {
mix-blend-mode: darken;
}
Clarear
Usar lighten faz o exatamente o oposto de darken.
.my-element {
mix-blend-mode: lighten;
}
Desvio de cores
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;
}
Queimadura 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 intensa
Usar hard-light cria um contraste vívido.
Esse modo de mistura exibe 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 combinação soft-light é uma versão menos rigorosa 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 é parecido com um negativo para fotos.
O modo de mistura difference usa o valor de diferença de cada pixel,
invertendo as cores da luz.
Se os valores de cor forem idênticos, eles ficarã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, 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 de cor de HSL. Cada um usa um valor de componente específico da camada ativa e o mistura com outros valores de componentes.
Tom
O modo de mistura hue usa a matiz 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 modo de combinação 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 cria uma cor a partir da matiz e da 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 a 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 de isolate,
ela vai criar um novo contexto de empilhamento,
o que vai impedir que ela se misture com uma camada do pano de fundo.
Como você aprendeu no módulo Z-index, quando você cria um novo contexto de empilhamento,
essa camada se torna a base.
Isso significa que os modos de combinação no nível pai não serão mais aplicados,
mas os elementos dentro de um elemento com isolation: isolate definido ainda poderão se combinar.
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 a seguir são modos de combinação CSS?
Se você quiser misturar cores diferentes de maneiras diferentes, qual estilo de modo de mistura é necessário?