blog

May 11, 2023

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

O filtro CSS e os modos de mesclagem são ferramentas poderosas para aplicar facilmente

O filtro CSS e os modos de mesclagem são ferramentas poderosas para aplicar facilmente efeitos visuais impressionantes à sua página da Web sem a necessidade de códigos complexos.

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.

Você aplica filtros CSS usando ofiltro 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 função de variável CSS. 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:

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.

Otons 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.

Osé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:

combinandotons de cinza()a 14% esépia()a 30% pode criar um efeito vintage ou retrô em sua imagem.

Osaturar() 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.

Oinvertido() 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:

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

Ohue-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 ohue-rotate()econtraste()filtros podem criar um efeito vibrante e colorido em suas imagens.

Por exemplo:

Hue-rotate pode aceitar um valor degrau,graduação,rad, ouvez . O código acima gira o matiz da imagem em 10 graus e aumenta o contraste.

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 obrilho()eborrão()filtros podem criar um efeito sonhador e suave em suas imagens.

Por exemplo:

O código acima diminui o brilho em0,8 (80%)e aplica um5pxefeito de desfoque na imagem.

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 odrop-shadow()eopacidade()filtros podem criar um efeito sutil em seus elementos de texto.