Tableless

Busca Menu

#BlendingCSS – Modos de mesclagem em CSS: Teoria da Cor e Aplicação Prática

Seja o primeiro a comentar por

OBS:. o método abordado sobre Blending (mesclagem de cores e camadas) não é igual, mas não diferente do método abordado pela nossa colega Dani Guerrato no post Modos de Mesclagem em CSS – Blend Mode CSS

Diga-se de passagem nós abordaremos visões abrangentes e características técnicas do método de aplicação de Blending no CSS, mas se você quer dar uma previa nos conceitos de background css antes de ler esse post seria legal: CSS3 — Trabalhando com Múltiplas imagens background-images (tem imagens bem legais)

Ok, dados os avisos bora para o código!

Se você usa Photoshop pode estar familiarizado com o “Blending” (modos de mesclagem de camadas). 

Eles nós permitem que você combinar “camadas” ( ou layers ) de formas diferentes e eles são muito divertido para brincar. O Blending CSS (modos de mistura em CSS), no entanto,  infelizmente ainda não são suportados universalmente, mas logo estarão certamente no seu caminho.

Neste tutorial, vamos aprender como trabalhar com as diferentes maneiras que você pode implementar Blending CSS (modos de mistura) usados CSS.

As noções básicas de Blending CSS

Se você nunca usou este recurso no Photoshop ou nunca ouviu falar dele, vamos te mostrar como Blending (modos de mistura), e suas formas e Formulas funcionam…  pode parecer um pouco confuso mas vamos dividi-lás em partes visuais para compreendermos melhor.

O que realmente significa “Blending”?

Modos de Mesclagem (“Blending”) estão disponíveis no software de desenho já faz alguns anos, mas o conceito de Blending (“modos de mistura”) tem sido realmente usados por muito mais tempo, mesmo antes dos computadores fossem inventados.

O Blending é parte dos modos de mesclagem, que refere-se a pegar duas cores e combiná-los de uma forma para fazer uma cor só. Mais precisamente, pegamos dois mapas pixel e misturámos eles juntos

É como um “Juicer” – centrifugas de suco, onde você coloca duas frutas de distintas cores numa ponta e tem um colorido suco misturado do outro lado da máquina.
Blender-Juicer-Vegetables-Fruits-Drink-777x437

 

Como que a mistura ocorre é a parte “modo” de modos de mesclagem. Como é que essas cores interagem? Porque estamos a trabalhar com o espaço digital, podemos tomar qualquer fórmula matemática e aplicá-lo às duas entradas para derivar uma saída.

 

Uma imagem não tratada de uma medusa

Uma imagem não tratada de uma medusa

 A mesma água-viva com uma camada de laranja sólido (a "fonte") colocado sobre ele

A mesma água-viva com uma camada de laranja sólido (a “origem de mesclagem”) colocado sobre ele

 Aqui está a nossa camada de origem com a "tela" modo de mesclagem aplicadoAqui está a nossa camada de origem de mesclagem com a “tela” com o Blending aplicado

Você faz a matemática

Se você está se sentindo realmente ambicioso, dê uma olhada através Task Force FX da W3C do documento de composição oficial que explica as implementações matemáticas de cada um dos diferentes modos de blending. Demonstra uma fórmula usada para calcular mais modos de mesclagem .

Cm = B (Cb, Cs)
  • Aqui, Cm é a cor resultante após a mistura.
  • B refere-se à função de mistura.
  • O Cb variável é a cor de fundo.
  • E o Cs variável é a cor de origem.

Todas as cores são baseados numa escala de 0-1, que mapeia diretamente para um valor 0-255 RGB.

nee-nees-096-min-compressor

Existem duas categorias de modos de Blending: não-separáveis e os separáveis.

Se um blending é considerada separável, ou não é determinado pelo algoritmo subjacente. Se o algoritmo trata cada um dos canais de cor separados (vermelho, verde e azul // RGB) de igual modo, considera-se inseparáveis. Se ele usa cada um dos canais de cor, individualmente, considera-se separável.

Todos os modos de mistura só pode voltar cores que estão dentro da gama de 0 a 255. Qualquer coisa para além desta gama em qualquer direção irá ser cortada para o intervalo. Quando você vê grandes áreas de branco ou preto em uma área mista, é provável porque essas áreas estão sendo cortadas.

Tipos de modos de mesclagem Disponível em CSS

Blending CSS, onde são suportados, trabalha de duas maneiras diferentes. O primeiro tipo de modo de mistura é chamada background-blend-mode . Esta propriedade permite que você misturar todos os fundos dentro de um elemento com o outro.

Se você tiver definido, por exemplo, múltiplas imagens de fundo (suportados em todos os navegadores além do IE8), a primeira imagem de fundo será tratada como a camada de origem, e qualquer imagem adicionada posteriormente será tratada como a camada de fundo, encontrando-se por baixo.

Adicionando uma cor de fundo (que deve ser o último da lista) coloca mais uma camada na parte inferior. A cor será tratada como a camada de fundo, e as imagens como as camadas de origem. Veja o seguinte na regra de estilo, por exemplo:

div {
  background:
  url(img/pattern.png),
  url(img/jellyfish.jpg), 
  #f07e32;
}

Isso nos dá:

E nós pode então adicionar modos de Blending:

div {
  background:
  url(img/pattern.png),
  url(img/jellyfish.jpg), 
  #f07e32 ;
  background-blend-mode: screen;
}

Aqui estão dois divs usando esses estilos, um sem o modo de mesclagem, o segundo com:

A mistura tipo de modo secundário, mix-blend-mode , permite elementos independentes a serem misturados. A especificação é mais específica sobre a implementação, mas a mistura ocorre em “contextos de empilhamento”.

Isto é o que acontece quando usamos mix-blend-mode , na tentativa de obter a imagem de fundo e cor dentro do mesmo elemento para misturar (uma sintaxe de código um pouco mais limpa):

.my-overlay-element {
  background-color: #f07e32;
  background-image: url(img/jellyfish.jpg); // Note: This image will not be blended with the background color.
  mix-blend-mode: color-dodge;
}

Abaixo, você pode encontrar uma demonstração interativa para explorar os efeitos de um determinado modo de mistura.

Blend Modes separáveis

Vamos dar uma olhada nos modos de mesclagem (“Blending”) disponíveis, examinando a fórmula utilizada, e aplicando cada um para o círculo vermelho colocado acima da nossa água-viva.

 

Screen (tela):

B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]

Screen (ou tela) é nomeado após o conceito de projetar múltiplas exposições de fotografias, ao mesmo tempo em uma tela. A cor resultante é sempre pelo menos tão leve quanto uma das camadas combinadas.

o modo de blend da tela

o modo de blend da tela

Darken:

B(Cb, Cs) = min(Cb, Cs)

Seleciona a mais escura das duas cores.

Darken Mode Blending

Darken Mode Blending

Lighten: B(Cb, Cs) = max(Cb, Cs)

Seleciona a mais clara das duas cores.

Lighten blend mode

Lighten blend mode

Color Dodge:

if(Cb == 0)
    B(Cb, Cs) = 0
else if(Cs == 1)
    B(Cb, Cs) = 1
else
    B(Cb, Cs) = min(1, Cb / (1 - Cs))

Color Dodge clareia a cor de fundo para refletir a cor de origem.

blend mode Color Dodge

blend mode Color Dodge

Color Burn (cor queimada):

if(Cb == 1)
    B(Cb, Cs) = 1
else if(Cs == 0)
    B(Cb, Cs) = 0
else
    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

O Color Burn escurece a cor de fundo, aumentando o contraste entre a fonte e o fundo.

Modo de queimadura mistura Cor

Color burn blend mode

Hard light:

if(Cs <= 0.5)
    B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)

Aplica-se "multiply" em cores mais claras e "screen" em cores mais escuras. Essencialmente, "Hard light" é o oposto de "overlay", é que veremos a seguir.

blend mode luz dura

Hard light blend mode

Overlay:

Aplica-se "screen" em cores mais claras e "multiply" em cores mais escuras; escrito como o mesmo que "Hard light", exceto com os argumentos para a função inversa.

modo de blend Overlay

Overlay blend mode

Soft Light:

Este modo de Blending aplica-se uma variante de "multiply" em valores escuros e uma variante da "screen" em valores mais leves (similar à screen).

Neste algoritmo, vemos uma função secundária D , que está situado no with cláusula com base no valor atual do azul (R-G-B) na cor. O resultado final é tipicamente um efeito muito mais suave do que "overlay".

blend mode luz Sof

Sof light blend mode

Difference:

Diferença pega o valor absoluto da diferença entre as duas cores, que tem o mesmo efeito de um negativo fotográfico.

blend mode diferença

Difference blend mode

Exclusion:

O modo de exclusão tem o mesmo efeito de base como o modo "diferença", excepto que as cores semelhantes resultar num valor mais baixo do meio de contraste (ao invés de um valor mais escuro).

blend mode Exclusão

Exclusion blend mode

Blend Modes não-separáveis

Os Blend Modes "não-separáveis" são modos de mesclagem utilizam algumas funções extras, incluindo as funções ClipColor, SetLum, e Sat.

Nota importante: Nenhuma versão do Safari suporta blend modes "hue", "saturation", "color", ou "luminosity"  com mix-blend-mode ou background-blend-mode .

Observe o min , mid e max são funções de utilitária que consulta a valores máximos, médios e mínimos. (Mid não é a média dos três valores.) Os valores Cred , Cgreen , e Cblue referem-se a valores de vermelho, verde e azul das cores presentes na C .

Com estas definições alinhadas, podemos agora olhar para os blend modes não-separáveis.

Hue (Matiz):

Este modo aplica-se a tonalidade da camada de fonte para a luminância e saturação da cor de fundo.

blend mode Hue

blend mode Hue

Saturation (Saturação):

Este modo faz a mesma coisa como o modo "hue", mas em vez disso se aplica a saturação do primeiro plano para a tonalidade e a luminância de fundo.

modo de mistura de saturação

Saturation blend mode

Color (cor):

Aplica-se o hue (matiz) e a saturação do primeiro plano para a luminância de fundo.

modo de mistura de cores

Color blend mode

Luminosity (Luminosidade):

Este modo aplica-se a luminosidade da camada de origem com o hue (matiz) e a saturação da camada de fundo.

blend mode Luminosidade

Luminosity blend mode

Conclusão

Modos de mistura  ("Blending Mode") em CSS fornece um nova e excitante flexibilidade para a concepção e experiências estéticas singulares. Entender a matemática e a teoria da cor que se aplica a cada um dos modos de blending ("mesclagem") disponíveis fornece-lhe um conjunto de ferramentas mais holística.

O que você vai fazer com os navegadores quando eles adicionarem suporte para modos de mistura?

Links Relacionados

Texto traduzido

Publicado no dia