Sobre o maravilhoso Blend Mode do CSS3

Alguns projetos que eu pego usam algum blend mode do Photoshop para deixar imagens com algum tom de cor baseado na paleta de cores do site. Na maioria das vezes algum designer ou alguém com photoshop fica com a responsabilidade de alterar essa imagem antes de subi-la como conteúdo do site. Não é um processo muito inteligente já que criamos mais um passo para que a tal imagem vá pro ar.

O CSS3 e o HTML5 estão cada vez mais completos, permitindo uma reprodução mais fácil do que fazemos nas ferramentas gráficas, como sombras, degradês, etc. Hoje em dia já podemos utilizar o blend mode do próprio CSS3. Mágico, não?

O código é simples, dá pra decorar em uma olhadinha. Vamos ao exemplo!

Multiply

Os seguintes efeitos de blend mode estão disponíveis: Darken, Lighten, Color-dodge, Color-burn, Hard-light, Soft-light, Difference, Excluse, Hue, Saturation, Color, e Luminosity.

Temos uma lista enorme pra reproduzir quase tudo que existe nos softwares gráficos, como o Photoshop:

Untitled-3

Gostou? Confira a documentação do blend mode!

 

Rafael Cavalcante