CSS blend modes parte 2

CSS blend modes parte 2

Se você ainda não viu, no meu último post falei sobre a novidade CSS blend modes. Este post é uma continuação do mesmo, pois irei falar sobre como será possível aplicar os mesmos blend modes em outros lugares, como por exemplo em fundos (propriedade background) e em sombras (propriedades box-shadow e text-shadow).

O draft da especificação Compositing and Blending 1.0 introduz mais 5 novas propriedades: background-blend-mode, background-alpha-compositing, box-shadow-blend-mode, text-shadow-blend-mode e foreground-blend-mode. Falaremos sobre cada uma delas a seguir.

Blend modes em backgrounds

Também é possível aplicar um blend mode apenas no background de um elemento. Para isso temos 2 novas propriedades CSS: background-alpha-compositing e background-blend-mode.

Para ilustrar as aplicações deste post, iremos usar a seguinte imagem de exemplo:

Homer Original

Vamos considerar que a imagem acima pode ser composta por uma <div> geral que tem o Moe’s (bar do Moe) como fundo e por mais uma <div> de fundo que contém o conteúdo – a imagem do Homer e seus nomes (HTML abaixo):

<div class="bar">
    <div class="fundo-azul">
    	<img class="homer" src="homer.png" />
        <h1>Homer</h1>
        <h2>Simpson</h2>
    </div>
</div>

background-blend-mode

Como vimos no post anterior, teremos 16 blend modes disponíveis, e poderemos aplicá-los da mesma maneira para os backgrounds com a propriedade background-blend-mode.

Aplicando o blend mode exclusion no fundo da div.fundo-azul:

Homer background-blend-mode
.fundo-azul {
    background-color: #4DA6FF; /* azul claro */
    background-blend-mode: exclusion;
}

Perceba que o blend mode apenas é aplicado ao background do elemento, ou seja, no fundo azul – deixando os elementos filhos da div.fundo-azul  inalterados.

background-alpha-compositing

Assim como a propriedade alpha-compositing, define o modo de composição usado quando é realizada a composição em um background de um elemento. Seu valor padrão é source-over, e existem mais 12 possibilidades. Para saber mais, visite a seção sobre Composição avançada do draft da especificação W3C.

Blend modes em foregrounds

Ao contrário dos backgrounds, com a propriedade foreground-blend-mode será possível definir o blend mode para o texto e elementos filhos.

foreground-blend-mode

Vamos definir o foreground-blend-mode na div.fundo-azul como exclusion:

Homer foreground-blend-mode
.fundo-azul {
    foreground-blend-mode: exclusion; /* elementos filhos */
    /* ... */
}

Assim todos os elementos aninhados no elemento div.fundo-azul (a imagem e os textos) serão renderizados com o blend mode determinado e o fundo permanecerá inalterado.

Blend modes em sombras

Já tá virando brincadeira, né. Mas é verdade, blend modes apenas em sombras! Sabemos que em CSS temos duas propriedades que definem sombras: box-shadow e text-shadow, de maneira análoga teremos também mais duas propriedades para aplicação de blend modes em sombras: box-shadow-blend-mode e text-shadow-blend-mode.

box-shadow-blend-mode

Vamos criar um efeito de fading na div.fundo-azul (como se ela estivesse desaparecendo nas suas extremidades). Para conseguirmos isto apenas precisamos aplicar uma sombra da mesma cor (azul claro) e aplicar o mesmo blend mode (exclusion).

Homer box-shadow-blend-mode
.fundo-azul {
    /* aplicando a sombra */
    box-shadow: 0px 0px 22px 22px #4DA6FF; /* mesma cor que o fundo */
    box-shadow-blend-mode: exclusion; /* mesmo blend mode que o fundo */
}

Legal, hein!?

text-shadow-blend-mode

Agora é a vez de aplicar um blend mode em sombras de texto com a propriedade text-shadow-blend-mode. Vamos aplicar o blend mode overlay na sombra do elemento <h1>:

Homer text-shadow-blend-mode
h1 {
    /* aplicando a sombra no texto */
    text-shadow: 7px 7px 1px black;
    text-shadow-blend-mode: overlay;
}

Perceba como a sombra de <h1> (“Homer”) ficou bem direfente da sombra de <h2> (“Simpson”), pois ela realiza um blending com o fundo azul.

Multiplicidade de valores

Se qualquer uma das propriedades background, box-shadow ou text-shadow forem definidar com múltiplos valores, também será possível definir seus respectivos blend modes com múltiplos valores separando-os por ,. Abaixo um exemplo com text-shadow-blend-mode:

Looooop
#psicodelia {
    color: white;
    font-size: 120px;
    /* aplicando multiplas sombras no texto */
    text-shadow: -10px 0px 12px #2692FF,
                  10px 0px 12px #2692FF,
                 -23px 0px 12px #FF7F00,
                  23px 0px 12px #FF7F00;
    /* aplicando os blend modes para cada sombra */
    text-shadow-blend-mode: difference,
                            exclusion,
                            difference,
                            exclusion;
}

O mesmo serve para background-blend-mode e box-shadow-blend-mode.

Suporte

Nenhum navegador ainda se atreveu em implementar nada sobre blend modes, afinal de contas a especificação ainda tem que amadurecer um pouco. E também não há previsões disso.

Como testar?

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.

Por hoje é isso aê!

#32