mix-blend-mode é uma propriedade CSS que define como o conteúdo de um elemento deve se misturar com o conteúdo do elemento pai e seu plano de fundo. Com isso, você pode criar combinações e cores agradáveis para partes do conteúdo de um elemento, dependendo de seu fundo direto.
mix-blend-mode oferece aos desenvolvedores CSS maior flexibilidade para criar designs nativos usando texto real em imagens, eliminando assim a necessidade de usar imagens frequentemente inchadas editadas com ferramentas como o Photoshop.
Uma grande vantagem que nos oferece é um melhor desempenho, pois menos imagens seriam necessárias e os tamanhos dos arquivos seriam significativamente menores. Além disso, o uso de imagens photoshopadas não oferece os mesmos benefícios de SEO que o texto real oferece.
Outro benefício importante de usar o mix-blend-mode em vez de alternativas de imagem editada é que você pode usar animações CSS, dando-lhe a chance de adicionar mais vida ao seu site e aos elementos. Outros casos de uso prático para o mix-blend-mode incluem a remoção do fundo branco dos logotipos e a criação de contraste dinâmico de texto em qualquer fundo.
Como o mix-blend-mode funciona em poucas palavras
mix-blend-mode cria o que é conhecido como contexto de empilhamento . O contexto de empilhamento é um eixo z imaginário em relação ao usuário de frente para a janela de visualização onde residem os elementos HTML. Eles ocupam este espaço com base nas prioridades dos elementos. Esta é a mesma ideia que a propriedade CSS position usa também.
mix-blend-mode se aplica a todos os elementos, incluindo SVGs, embora ainda não disponível em todos os navegadores no momento da escrita.
Sintaxe e valores
A sintaxe para mix-blend-mode é:
mix-blend-mode:
Onde
normal
mix-blend-mode: normal
Este é o valor padrão da propriedade e não adiciona nenhum modo de mesclagem.
multiply
mix-blend-mode: multiply
Isso multiplica a cor do elemento com a do fundo. A cor resultante é mais escura, dependendo do fundo.
screen
mix-blend-mode: screen
screen torna o conteúdo muito mais claro do que seu fundo. Ele multiplica a cor do conteúdo com seu fundo e complementa o resultado.
overlay
mix-blend-mode: overlay
O que overlay faz é multiplicar se o fundo for mais escuro que o conteúdo e screen se o fundo for mais claro que o conteúdo do elemento. Isso é semelhante ao hard-light com as condições de cor de fundo e conteúdo invertidas.
darken
mix-blend-mode: escurecer
Isso escurece a área do fundo que está escura e deixa outras partes inalteradas.
lighten
mix-blend-mode: clarear
O conteúdo fica mais claro em torno das partes do fundo que têm uma cor clara. É o oposto de escurecer .
color-dodge
mix-blend-mode: color-dodge
Isso ilumina a cor de fundo para refletir a cor do conteúdo do elemento. O resultado é derivado da divisão da cor de fundo pelo inverso da cor do conteúdo. Você notaria que a cor resultante do conteúdo costuma ser muito”barulhenta”.
color-burn
mix-blend-mode: color-burn
Isso é o oposto de color-dodge . Este valor escurece a cor do plano de fundo para refletir a cor do conteúdo do elemento. O resultado é obtido invertendo a cor de fundo , dividindo-a pela cor do conteúdo, e invertendo esse resultado. Se a cor do conteúdo for o inverso da cor de fundo, o resultado será preto.
hard-light
mix-blend-mode: hard-light
hard-light irá multiplicar se a cor do conteúdo for mais escura que o fundo, e screen se a cor do conteúdo for mais clara. Isso é semelhante a overlay , mas o fundo e o primeiro plano são trocados.
soft-light
mix-blend-mode: soft-light
Quase o oposto de hard-light . Isso aplicará clarear ou escurecer dependendo da cor do conteúdo. Ele dá uma aparência mais suave do que o resultado de hard-light .
difference
mix-blend-mode: diferença
diferença escolhe a mais escura das cores entre o conteúdo e o fundo e a subtrai da outra cor (mais clara). Se alguma das cores entre o conteúdo e o fundo for branca, o resultado será o inverso da outra cor.
exclusion
mix-blend-mode: exclusão
Isso é semelhante a diferença , mas com contraste muito menor. Tal como acontece com diferença , se uma das cores entre o conteúdo e o fundo for branca, o resultado será o inverso da outra cor.
hue
mix-blend-mode: hue
Hue combina o hue do conteúdo e a saturação e luminosidade do plano de fundo para criar uma cor para o conteúdo.
saturação
mix-blend-mode: saturation
saturation , por outro lado, combina a saturação do conteúdo e a matiz e luminosidade de o plano de fundo para criar uma cor para o conteúdo.
color
mix-blend-mode: color
color cria uma cor para o conteúdo combinando o matiz e a saturação do conteúdo com a luminosidade do fundo.
luminosidade
mix-blend-mode: hue
luminosity inverte o atributo color . Ele combina a luminosidade do conteúdo com a matiz e saturação do plano de fundo para criar uma cor para o conteúdo.
Demonstração
Ver a Caneta
Mix blend mode de David ( @Ajiva )
em CodePen .
Alguns outros casos de uso para mix-blend-mode
Efeito de corte
Neste exemplo, podemos criar um efeito de recorte para o texto, dando ao texto um fundo branco e usando o modo de mesclagem screen .
Ver a caneta
cut out design de David ( @Ajiva )
em CodePen .
Efeito Spotlight
O próximo exemplo retrata um efeito de destaque. O texto fica oculto até que a luz reflita sobre ele. Isso é obtido usando o modo de mesclagem escurecer no texto, de forma que ele seja exibido apenas quando o div com a cor amarela estiver nele.
Veja a caneta
Torch Light com mix-blend-mode de David ( @Ajiva )
em CodePen .
Usando mix-blend-mode com filter
A combinação do mix-blend-mode com a propriedade filter ajuda você a obter designs realmente envolventes e cativantes com CSS. Você pode usar filter no conteúdo e no plano de fundo para obter o efeito que desejar.
No exemplo abaixo, podemos obter um design de aparência branqueada aplicando um filtro inverter ao plano de fundo e ao conteúdo e, em seguida, usando diferença para o
Ver a Caneta
mix-blend-mode with filters de David ( @Ajiva )
em CodePen .
Aqui está outro semelhante que uso no meu site:
Veja a Caneta
Efeito negativo mix-blend-mode por David ( @Ajiva )
em CodePen .
Remoção de fundo branco de um logotipo
Digamos que você tenha uma imagem de logotipo com fundo branco, e o fundo sobre o qual você coloca a imagem não seja branco. Claro, uma solução simples é usar uma ferramenta como o Photoshop (ou mesmo ferramentas gratuitas como remove.bg ) para cortar o fundo branco, mas isso também pode ser obtido usando o mix-blend-mode .
Veja a caneta
Remova o fundo branco do logotipo com mix-blend-mode de David ( @Ajiva )
em CodePen .
multiplicar multiplica a cor do plano de fundo pela cor do conteúdo, de forma que a parte branca do logotipo muda para a cor do plano de fundo. Usei filter: contrast (1) para tornar o logotipo mais claro, já que o valor multiply torna o logotipo um pouco mais escuro.
Embora essa possa não ser a solução ideal para esse problema, ainda pode ser útil em alguns cenários.
Conclusão
As possibilidades com o mix-blend-mode são, ouso dizer, infinitas. Ele abre um novo mundo de habilidades para você como desenvolvedor front-end. Você pode continuar experimentando e tentando mix-blend-mode com diferentes propriedades, incluindo background-blend-mode .
Espero que este artigo tenha sido capaz de lhe dar uma introdução ao uso do mix-blend-mode e mostrar exemplos relevantes que você pode querer usar.
A postagem Estilo de texto criativo com a propriedade CSS mix-blend-mode apareceu primeiro no LogRocket Blog .
