Quem trabalha com imagens em aplicativos gráficos como Photoshop, Fireworks, etc., provavelmente já sabe do que se trata. Blending é o ato de realizar composições entre cores. E como acontece no Photoshop ou no Fireworks, muitas dessas composições já estão pré-definidas e prontas para uso, essas composições são os blend modes, que agora estão vindo a fazer parte do CSS – graças ao trabalho da Adobe –, assim como já aconteceu com os filtros CSS.

Novas propriedades

Uma série de novas propriedades foram definidas: alpha-compositing, blend-mode, isolation, e knock-out. Falarei sobre cada uma delas posteriormente. Primeiro vamos começar pelo óbvio: a propriedade blend-mode.

Vamos começar a brincadeira aplicando um blend mode a um determinado elemento:

img.blend {
    blend-mode: overlay;
}

Agora toda img com a classe .blend será renderizada como overlay (o veremos a seguir).

Com o intuito de melhorar a didática (vocês sabem como é aqui no Loop), iremos utilizar a imagem abaixo como exemplo no decorrer deste post.

Entendendo blend modes

Blending é simplesmente fazer uma mistura de cores de um elemento com o que há debaixo dele (também chamado de backdrop). Essa mistura é realizada através de cálculos com as cores do elemento em questão e seu respectivo backdrop. Então, cada blend mode basicamente define uma função matemática que será usada para obter uma determinada composição. Caso queira saber mais sobre como estes cálculos são realizados, leia isso.

Inicialmente já estão previstos 16 blend modes, e poderemos utilizá-los através da nova propriedade blend-mode, mas antes, vamos melhorar só um pouquinho a nossa imagem de exemplo.

Vamos adicionar outras imagens em cima da mesma, e vamos considerar que estas novas imagens são da classe .heineken (veja abaixo).

normal

img.heineken {
    blend-mode: normal;
}

Como o próprio nome já diz, este não tem nada de mais, é apenas o valor de blending padrão de qualquer elemento – este será renderizado sem nenhuma composição gráfica.

multiply

img.heineken {
    blend-mode: multiply;
}

screen

img.heineken {
    blend-mode: screen;
}

overlay

img.heineken {
    blend-mode: overlay;
}

darken

img.heineken {
    blend-mode: darken;
}

lighten

img.heineken {
    blend-mode: lighten;
}

color-dodge

img.heineken {
    blend-mode: color-dodge;
}

color-burn

img.heineken {
    blend-mode: color-burn;
}

hard-light

img.heineken {
    blend-mode: hard-light;
}

soft-light

img.heineken {
    blend-mode: soft-light;
}

difference

img.heineken {
    blend-mode: difference;
}

exclusion

img.heineken {
    blend-mode: exclusion;
}

hue

img.heineken {
    blend-mode: hue;
}

saturation

img.heineken {
    blend-mode: saturation;
}

color

img.heineken {
    blend-mode: color;
}

luminosity

img.heineken {
    blend-mode: luminosity;
}

Se quiser saber mais detalhes a nível matemático sobre qualquer um desses blend modes, dê uma sacada aqui.

Propriedades alpha-compositing, knock-out e isolation

Além da propriedade blend-mode, existem outras propriedades referentes a composição: alpha-compositing, knock-out e isolation.

alpha-compositing

Define o modo de composição usado quando é realizada a composição de um elemento. Seu valor padrão é source-over, e existem mais 12 possibilidades. Por ser um assunto bastante extenso e matemático demais, não entrarei em detalhes, mas caso você queira saber mais sobre o assunto, visite a seção sobre Composição avançada do draft da especificação W3C.

knock-out

Define se um grupo de elementos é ou não um grupo knock-out. A diferença em relação a um grupo normal é que os elementos de um grupo knock-out realizam composição e blending apenas com os elementos de fora do grupo – ou seja, com o backdrop do grupo, e os elementos do próprio grupo não são considerados.

Para entendermos melhor, vejamos o exemplo abaixo:

No exemplo acima temos um exemplo que mostra as mesmas duas imagens de antes com o seus blend-modes como darken. A diferença aqui é que elas estão se sobrepondo – note que a estrela sobrepõe a cerveja. Agora, vamos considerar que estas duas imagens estão agrupadas dentro de uma <div> qualquer:

<div>
    <img src="cerveja.jpg" />
    <img src="estrela.jpg" />
</div>

Agora compare a imagem acima com o exemplo abaixo. Consegue notar a diferença? No exemplo abaixo, o grupo (a <div>) é um grupo knock-out.

div {
    knock-out: knock-out;
}

Perceba como os elementos de dentro do grupo realizam o blending apenas considerando o backdrop do grupo e ignorando o outros elementos do mesmo grupo. No nosso caso, a estrela ignora a cerveja e só faz o blending com o backdrop da <div> (as gostosas ao fundo). O valor padrão de knock-out é preserve.

isolation

Define se um grupo é isolado ou não (o comportamento padrão é não isolado). Dizer que um grupo é isolado implica em dizer que os elementos de um mesmo grupo realizarão blending usando um backdrop preto e totalmente transparente – rgba(0, 0, 0, 0) –, em vez do backdrop normal. Para mais detalhes, leia isso.

Blend-modes no background!

No próximo post falarei sobre como é possível aplicar tudo o que vimos aqui hoje apenas aos backgrounds dos elementos (este post já está grande demais). Então podem aguardar mais coisa boa vindo por ai.

Suporte

Nenhum navegador ainda se aventurou em implementar nenhuma dessas novidades que acabamos de ver. E também não há previsões.

Mas calma lá!

A Adobe fez um fork do Chromium, implementou algumas funcionalidades e disponibilizou para demonstrar o uso dos blend modes. Se você estiver afim de testar, faça o download do Chromium deles aqui e teste acessando essa página de testes. Eu fiz o teste e é show de bola.

E um feliz natal! Hohoho!

É isso ai pessoal, só me resta desejar um feliz natal pra todos os frond-enders – e claro, pra todos os back-enders também! E aproveitando a deixa, segue o vídeo publicado ontem pela BrazilJS Foundation com uma galera cantando (muito toscamente) a música “Então é Natal” – não é a toa que não estamos no ramo fonográfico, né.

Tosqueiras à parte, esta ótima iniciativa foi do Bernard de Luna, e uma galerona participou: O Felipe Nascimento (que tinha acabado de acordar, ou não), Giovanni Keppelen (animadíssimo como sempre), Bernard de Luna (com os óculos da irmã), Caio Gondim (com sua vibe regueira), Almir Filho (até eu, cara ;D), Jaydson Gomes (com seu solo de guitarra destruidor), Juarez Filho (pregando a palavra aos fiéis da Igreja do Front-End), Leonardo Alberto (Ed Motta Jr.), Leonardo Balter (o único que sabe cantar), Maujor (falando sua mensagem linda de final de ano), Reinaldo Ferraz (do W3C), Renato Mangini (do Google) e claro, Zeno Rocha (que estava fora do país e mesmo assim não ficou de fora).