Como usar filtros CSS e modos de mesclagem para criar efeitos visuais

O filtro CSS e os modos de mesclagem permitem que você aplique facilmente efeitos visuais à sua página da web. Os filtros são um conjunto de funções CSS predefinidas usadas para ajustar a renderização de imagens ou outros elementos HTML. Enquanto os modos de mesclagem determinam como um elemento deve se mesclar com seu plano de fundo ou elementos vizinhos.

Usando Filtros CSS

Você aplica filtros CSS usando o filtro propriedade e uma propriedade especificando o tipo de efeito aplicado. Cada propriedade de filtro é uma função CSS, que funciona de forma semelhante a uma variável CSS função. Ele aceita um parâmetro para especificar o quanto o filtro deve afetar o elemento estilizado.

Existem 10 funções de filtro CSS disponíveis para estilizar seu elemento HTML:

• borrão()
• brilho()
• contraste()
• drop-shadow()
• tons de cinza()
• hue-rotate()
• invertido()
• opacidade()
• saturar()
• sépia()

Você pode usar esses filtros individualmente ou em combinação para criar estilos exclusivos e aprimorar a aparência de seus elementos HTML.

Alguns desses filtros funcionam muito melhor com outros quando usados ​​da maneira certa.

Aqui estão alguns exemplos de combinação de filtros CSS para obter diferentes efeitos visuais em um elemento de imagem.

1. Tons de Cinza e Sépia

O tons de cinza() O filtro remove todas as informações de cores de uma imagem ou elemento de texto. O filtro assume um valor entre 0 e 1, com 0 significando a cor original e 1 sendo o efeito de escala de cinza total.

O sépia() O filtro aplica um efeito de tom sépia a uma imagem ou elemento de texto. O filtro também assume um valor entre 0 e 1.

Por exemplo:

img {
filtro: escala de cinza(14%) sépia(30%);
}

combinando tons de cinza() a 14% e sépia() a 30% pode criar um efeito vintage ou retrô em sua imagem.

2. Inverter e Saturar

O saturar() filtro aumenta ou diminui a saturação de uma imagem ou elemento de texto. O filtro assume um valor entre 0 e infinito, sendo 1 a cor original e valores maiores aumentando a saturação.

O invertido() O filtro inverterá as cores de uma imagem ou elemento de texto invertendo a tonalidade de cada cor presente em 180 graus na roda de cores. Isso significa que o filtro altera os níveis de brilho e saturação do elemento, mantendo o matiz.

Por exemplo:

img {
filtro: invertido(30%) saturar(75%);
}

Este código inverte as cores da imagem e aumenta a saturação em 75%.

3. Matiz-Girar e Contrastar

O hue-rotate() O filtro gira os matizes de uma imagem ou elemento de texto, o que significa que ele altera a cor geral do elemento enquanto mantém os níveis de brilho e saturação. A quantidade de rotação pode ser especificada em graus, com 0 representando a cor original e 360 ​​representando uma rotação completa de volta à cor original.

Combinando o hue-rotate() e contraste() filtros podem criar um efeito vibrante e colorido em suas imagens.

Por exemplo:

img {
filtro: girar matiz(10grau) contraste(150%);
}

Hue-rotate pode aceitar um valor de grau, graduado, rad, ou vez. O código acima gira o matiz da imagem em 10 graus e aumenta o contraste.

4. Brilho e desfoque

Os filtros de brilho e desfoque são bastante auto-explicativos. A primeira ajustando o brilho da sua imagem, e a segunda controlando o nível de desfoque aplicado.

Combinando o brilho() e borrão() filtros podem criar um efeito sonhador e suave em suas imagens.

Por exemplo:

img {
filtro: brilho(0.8) borrão(5px);
}

O código acima diminui o brilho em 0.8 (80%) e aplica um 5px efeito de desfoque na imagem.

5. Drop-Shadow e Opacidade

Um efeito de sombra projetada é um efeito visual no qual um elemento parece projetar uma sombra na superfície atrás dele, dando a ilusão de profundidade e dimensionalidade. As sombras projetadas geralmente são aplicadas a texto ou imagens para criar uma sensação de separação entre o elemento e o plano de fundo.

Enquanto isso, o filtro de opacidade controla a transparência de um elemento.

Combinando o drop-shadow() e opacidade() filtros podem criar um efeito sutil em seus elementos de texto.

Por exemplo:

.texto-efeito {
transformar: traduzir(-50%, -50%);
cor: preto;
sombra projetada: 10px 9px 9pxbege;
opacidade: 70%;
}

Neste exemplo, a sombra projetada está posicionada 10 pixels à direita e 9 pixels na parte inferior, com um raio de desfoque de 9 pixels. A cor da sombra é especificada como bege. Uma opacidade de 70% também é especificada.

Usando modos de mesclagem CSS

Os modos de mesclagem CSS controlam como o conteúdo de um elemento se mescla com o plano de fundo ou outros elementos, permitindo efeitos de composição criativos.

Alguns dos casos de uso mais populares para modos de mesclagem CSS incluem:

• Criando gradientes: Os modos de mesclagem podem ser usados ​​para criar vários gradientes de fundo CSS essa transição entre as cores, oferecendo uma maneira fácil e eficiente de adicionar profundidade e dimensão aos seus designs.
• Adicionando textura: você também pode usar modos de mesclagem para adicionar textura a planos de fundo, imagens e outros elementos em uma página. Essa pode ser uma ótima maneira de criar uma aparência única e adicionar interesse visual a elementos simples.
• Ajustando as cores: com os modos de mesclagem, você pode ajustar as cores dos elementos em uma página, incluindo ajustando cores de fundo. Isso permitirá que você crie facilmente efeitos como sobreposições de cores ou imagens coloridas.

Os dois modos de mesclagem mais comuns são modo de mesclagem de fundo e misturar-misturar-modo. Ambas as propriedades compartilham os mesmos 15 valores: normal, multiplicação, tela, sobreposição, escurecimento, clareamento, subexposição de cor, saturação, queima de cor, luminosidade, diferença, luz forte, luz suave, exclusão e matiz.

Você deveria usar modo de mesclagem de fundo quando você tem vários layouts de plano de fundo, como imagens de plano de fundo em um elemento, e deseja que todos se misturem.

Você também pode usar o misturar-misturar-modo para combinar o conteúdo de um determinado elemento com o conteúdo de seu pai direto. O misturar-misturar-modo é normalmente usado para mesclar conteúdo de primeiro plano, como texto, formas ou imagens.

Aqui está um exemplo de uso misturar-misturar-modo para mesclar texto e imagem.

HTML:

<divaula="recipiente">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="imagem de fundo"
 />
<divaula="contente">
<h1>Bem-vindoh1>
<p>Olá usuário!p>
div>
div>

CSS:

.recipiente {
posição: absoluto;
largura: 100%;
altura: 100%;
}
.imagem de fundo {
largura: 100%;
altura: 100%;
ajuste de objeto: cobrir;
}
.contente {
posição: absoluto;
principal: 50%;
esquerda: 50%;
transformar: traduzir(-50%, -50%);
alinhamento de texto: Centro;
misturar-misturar-modo: diferença;
}
h1 {
tamanho da fonte: 60px;
cor: branco;
}
p {
tamanho da fonte: 40px;
cor: branco;
}

O diferença o modo de mesclagem calcula a diferença absoluta entre os valores de cor do texto e a imagem escura subjacente.

Nesse cenário, a cor do texto interagiria com o fundo escuro, resultando em um efeito de alto contraste.

Combinando filtros e modos de mesclagem

Você pode combinar filtros e modos de mesclagem para criar efeitos visualmente ainda mais interessantes. Ao usar ambas as propriedades juntas, você pode obter resultados únicos e criativos que são difíceis de replicar com outras propriedades CSS.

Aqui está um exemplo que combina o filtro e o modo de mesclagem para criar um efeito mais complexo:

.meu-elemento {
filtro: brilho(150%) girar matiz(180grau) sombra projetada(0px 0px 10pxrgba(0, 0, 0, 0.5));
misturar-misturar-modo: tela;
}

Este código combina os filtros; brilho, girar matiz, sombra projetada, e um misturar-misturar-modo de valor tela à imagem. Aumenta o brilho em 150%, enquanto hue-girar inverterá as cores da imagem em 180 graus.

Então, também, uma sombra projetada é aplicada. Por último, o tela valor para o modo de mesclagem combinará as cores da imagem com o plano de fundo subjacente, resultando em um efeito onde as cores mais claras são intensificadas e as cores mais escuras são misturadas com o fundo.

Dominando filtros e modos de mesclagem

Você aprendeu sobre os diferentes tipos de filtros CSS e como aplicá-los aos seus elementos HTML. Usando várias funções de filtro, como desfoque, contraste e rotação de matiz, você pode modificar a aparência de suas imagens. Você também viu exemplos de modos de mesclagem em ação e como eles podem ser usados ​​para criar designs exclusivos.

Se você experimentar mais essas técnicas, poderá adicionar um nível extra de interesse visual aos seus designs.