Como usar modos de mesclagem CSS

Os modos de mesclagem CSS são uma maneira fácil de adicionar efeitos de imagem diretamente no navegador.

Por causa disso, a maneira tradicional de editar e salvar fotos de uma solução de software de edição de imagens nem sempre é necessária. Como designers, passamos inúmeras horas adicionando efeitos a imagens com ferramentas como o Adobe Photoshop. À medida que avança neste tutorial, você notará que muitas das opções se assemelham às do Photoshop, mas agora podem ser feitas com a eficiência do estilo CSS.

Os modos de mesclagem do navegador eliminarão completamente a necessidade de software de edição de imagens? Não totalmente, e certamente ainda não. Mas o suporte a CSS e navegador percorreu um longo caminho no suporte a novas formas de edição de imagens. Corte e mascaramento CSS e SVG, modos de mesclagem, transformação 3D e muito mais certamente podem reduzir a dependência que temos de software de edição de imagens. À medida que os navegadores se tornarem mais sofisticados, veremos muito mais potencial e (esperamos) gastaremos menos tempo no Photoshop.

Modos de mesclagem CSS e modos de mesclagem de mixagem CSS

Este tutorial abordará modos de mesclagem CSS e como eles são usados. Para começar, existem algumas opções diferentes das quais você deve estar ciente. Um é um efeito com background-blend-mode e o outro é com mix-blend-mode .

Usando a background-blend-mode property , você pode misturar as camadas de fundo (imagem ou cor) de um elemento. Os modos de mesclagem são definidos como um valor e especificam como mesclar ou misturar as cores da imagem de fundo com a cor ou outras imagens de fundo atrás dela.

O que acontece se você quiser fazer alguma mistura, mas não com elementos de fundo? Os elementos podem ser misturados usando a propriedade mix-blend-mode . Esta propriedade descreve como a mesclagem deve ser entre os elementos HTML empilhados. Os elementos nas camadas sobrepostas se misturarão com os que estão abaixo dela. Quaisquer imagens, texto, bordas ou títulos serão influenciados por esta propriedade.

Exemplo de multiplicação do Adobe Photoshop

Observar a maneira tradicional de mostrar os modos de mesclagem em um editor de imagens nos dá uma ideia do que podemos realizar com os modos de mesclagem CSS. A foto a seguir foi criada no Adobe Photoshop. A imagem está em sua própria camada de fundo com uma camada vermelha acima. Um modo de mesclagem para a camada vermelha foi selecionado, que é “Multiply”. Como você pode ver, há uma sobreposição vermelha. Para obter esse efeito, o Adobe Photoshop pega as cores da camada que tem “Multiply” aplicada, multiplica pelas cores da(s) camada(s) abaixo dela e as divide por 255 para mostrar o resultado.

Esse mesmo efeito pode ser obtido com CSS, permitindo personalização mais rápida e fácil atualização.

Exemplo básico de um modo de mesclagem CSS

Um exemplo simples para ver como os modos de mesclagem funcionam é mesclar a imagem com uma background-color . Primeiro, o caminho da URL para a imagem precisa ser declarado e, em seguida, uma cor especificada. Depois de decididos, o modo de mesclagem precisa ser escolhido. Multiply foi selecionado aqui para mostrar como esse modo de mesclagem afeta a aparência da background-image .

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

Um modo de mesclagem é a maneira como o valor final da cor de um pixel é calculado quando as camadas se sobrepõem. Cada modo de mesclagem pega o valor da cor do primeiro plano e do fundo (cor superior e cor inferior), calcula seu valor e retorna um valor de cor. A camada visível final é o resultado do cálculo do modo de mesclagem em cada pixel sobreposto entre as camadas mescladas.

Multiplicar é um modo de mesclagem muito popular, mas também há outras opções de modo de mesclagem disponíveis: tela, sobreposição, escurecimento, clareamento, subexposição de cor, queima de cor, luz forte, luz suave, diferença, exclusão, matiz, saturação, cor e luminosidade. Se "normal" for especificado, isso redefinirá as coisas. Em vez de examinar os detalhes de cada modo de mesclagem um por um, experimentá-los é a melhor maneira de determinar qual será o resultado final.

Modo de mesclagem de plano de fundo com duas imagens

Em vez de ter uma sobreposição de cores em uma imagem, sobrepor duas imagens juntas pode ter um efeito muito legal. É tão fácil quanto adicionar duas imagens de fundo na declaração CSS. A próxima escolha é ter uma cor de fundo (ou não). Se você não quiser uma cor de fundo, ela pode ser removida e as imagens serão mescladas dependendo do modo de mesclagem que você escolher.

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Gradiente nos modos de mesclagem de fundo

Ao invés de usar apenas uma única cor, os gradientes também podem dar alguns efeitos únicos.

 .gradiente na imagem {
 fundo:
 gradiente linear (roxo 0%, vermelho 80%),
 linear-gradient(para a direita, roxo 0%, amarelo 100%), url("image.jpg");
 background-blend-mode: tela, diferença, clarear;
 } 

Você também notará que este exemplo tem vários modos de mesclagem de fundo. Se um modo de mesclagem não for suficiente, vários podem ser usados.

Exemplos de trabalho podem ser encontrados neste Codepen.

Misturar Exemplos de Modo de Mistura

Até aqui, o foco esteve no fundo. E se outros elementos na página quiserem aproveitar os modos de mesclagem? Isso não é problema e os mesmos tipos de modo de mesclagem estão disponíveis.

As coisas parecem as mesmas nos background-blend-modes com exceção de inicial, herdado e não definido.

• Inicial: Configuração padrão da propriedade que não define um modo de mesclagem.
• Herdar: herda o modo de mesclagem de seu elemento pai.
• Unset: remove o modo de mesclagem de um elemento.

Exemplo básico de um modo de mesclagem misto com isolamento

Ao trabalhar com mix-blend-mode , você encontrará a necessidade de fazer algum isolamento. Primeiro, é importante saber que o “empilhamento” é possível, e isso é valioso quando se trabalha com muitas camadas. Pense em uma pilha de caixas. Cada caixa é separada do grupo. Dentro de cada caixa, pode haver várias camadas de itens. Essa maneira de pensar ajudará a determinar o que precisa ser isolado.

Mistura de texto e imagem com o modo de combinação de mistura

Neste exemplo, o div com uma classe de img-wrap contém a imagem. A imagem tem um mix-blend-mode de multiplicação. Então, basicamente, a imagem parece cair em segundo plano.

Para evitar isso, o div img-wrap (também contendo o texto do cabeçalho) deve ser um novo conjunto de conteúdo empilhado, de modo que seja separado do plano de fundo do elemento do corpo. Isso é feito com a propriedade de isolamento. O valor padrão é auto, portanto, isolation: isolate; precisará ser adicionado.

Para testar isso, comente a propriedade de isolamento no div com a classe .img-wrap e verifique o resultado.

Aqui está o HTML:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

Aqui está o CSS. Preste muita atenção ao isolate no .img-wrap .

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

O exemplo de trabalho pode ser encontrado no Codepen.

Corte de texto com modo de mesclagem

Alguns efeitos de tipo interessantes podem ser criados com modos de mesclagem. Existe uma maneira fácil de recortar o texto. O plano de fundo é ocultado por um preenchimento no elemento h1 .

Aqui está o HTML:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

O que contém <div> é preenchido com a imagem de fundo da floresta.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

O título dentro dele é estilizado com uma cor de fundo opcional. O título tem um efeito transparente com a imagem de fundo semitransparente usando mix-blend-mode de multiplicação:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

O exemplo de trabalho pode ser encontrado no Codepen.

Modo de mesclagem e SVG

Os arquivos SVG são muito populares na web e os modos de mesclagem CSS também funcionam bem com eles. As formas podem ser facilmente direcionadas para dar a elas o modo de mesclagem desejado.

Isolar também foi fundamental neste exemplo. Sem isolar os círculos, o fundo cinza interferiria.

Aqui está o código para criar o grupo de círculos:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

Aqui estão os estilos CSS:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

Este exemplo pode ser encontrado no Codepen.

Suporte do navegador para modo de mesclagem de fundo e modo de mesclagem

O suporte ao navegador é muito bom, mas não totalmente consistente para o modo de mesclagem em segundo plano. Antes de iniciar um design utilizando esse recurso, certifique-se de verificar Posso usar. Atualmente, o Edge e o Safari não têm suporte. Para lidar com suporte limitado e dependendo de quais navegadores precisam ser suportados, um CSS Feature Query pode ser uma boa opção. Caso contrário, pensar em imagens “combinadas” como um aprimoramento (não um requisito) pode ser sua melhor aposta.

O suporte do navegador é um pouco melhor para o modo mix-blend. É bom estar ciente do apoio parcial. Por exemplo, o Safari não suporta matiz, saturação, cor ou luminosidade.

A melhor maneira de realmente aprender sobre o que pode ser projetado com modos de mesclagem é experimentar. Os exemplos mostrados aqui apenas arranharam a superfície. É incrível que tipo de gráficos podem ser criados usando modos de mesclagem. Este é um grande avanço para o que pode ser feito na web.

Alimente a liberdade de criar com o WP Engine

O WP Engine alimenta a liberdade de criar no WordPress. Os produtos da empresa, os mais rápidos entre todos os provedores de WordPress, alimentam 1,5 milhão de experiências digitais. Mais dos 200.000 principais sites do mundo usam o WP Engine para potencializar suas experiências digitais do que qualquer outra pessoa no WordPress. Encontre mais informações em wpengine.com ou fale com um representante hoje mesmo!