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
Quais das opções a seguir são modos de combinação do CSS?
Se você quiser misturar cores diferentes de maneiras diferentes, de qual estilo de modo de combinação você precisa?