Como adicionar filtros e reflexões às imagens no CSS?

A aparência de um site é altamente crucial se você pretende atrair cada vez mais público para o seu site. Portanto, para aprimorar a aparência geral de uma adição de site de efeitos gráficos às imagens ou imagens refletidas é bastante recomendado. O CSS fornece várias propriedades que permitem que você cumpra essas tarefas com facilidade. Discutimos essas propriedades em detalhes neste artigo. Neste post, discutimos o seguinte.

1. Filtros de imagem em CSS
2. Reflexões de imagem no CSS

Filtros de imagem em CSS

Com o objetivo de adicionar vários efeitos especiais a uma imagem como opacidade, borracha, saturação, etc., a propriedade do filtro CSS é usada.

Sintaxe

filtro: valor;

Os diferentes métodos associados à propriedade do filtro são explicados abaixo.

Valor	Descrição
nenhum	Este valor não adiciona efeito e é um valor padrão.
borrão	Adiciona borracha à imagem e gera valor em pixels.
brilho	É usado para aumentar ou diminuir o brilho de uma imagem e exibir valores em porcentagem.
contraste	Este valor ajusta o contraste de uma imagem e os valores são definidos em porcentagem.
escala de cinza	Ele transforma uma imagem em uma imagem em escala de cinza e também exibe valores em porcentagem.
Hue-Rotate	Este valor é usado para girar uma imagem e renderiza valores em graus.
invertido	Inverte as amostras que existem na imagem e os valores são definidos em porcentagem.
opacidade	Este valor ajusta a transparência de uma imagem e leva valores de 0 a 1.
saturar	STATETA UMA IMAGEM, tomando valores em porcentagem.
sépia	Este valor é usado para converter uma imagem em sépia e exibir valores em porcentagem.
Drop-shadow	É usado para aplicar um efeito de sombra na imagem.
url ()	É uma função que requer a localização de um documento XML contendo um filtro SVG e pode renderizar um link para um determinado elemento de filtro.
inicial	Este valor fornece à propriedade seu valor inicial.
herdar	Este valor herda a propriedade do filtro do elemento ancestral.

Agora que você conhece todos os valores que uma propriedade de filtro pode exibir, abaixo, demonstramos esses valores para um melhor entendimento.

Em primeiro lugar, vamos adicionar uma imagem à nossa página da web usando HTML básico.

Html

Aqui simplesmente adicionamos uma imagem usando a tag.

CSS

img
largura: 30%;
Altura: Auto;

Agora estamos usando CSS básico para dar alguma largura e altura à imagem.

Saída

A imagem foi adicionada à página da web.

Agora vamos aplicar filtros a esta imagem e explorar os vários valores que a propriedade Filter pode exibir.

Borrão

Definimos o efeito desfoque para 2px. Quanto mais valor do método Blur aumentará a borracha.

.Blur
filtro: desfoque (2px);

Saída

Esta é uma imagem embaçada.

Brilho

O brilho da imagem foi definido como 0.50. Uma redução no valor resultará em uma queda no brilho e vice -versa.

.brilho
filtro: brilho (0.50);

Saída

O brilho da imagem foi ajustado com sucesso.

Contraste

Definimos o contraste da imagem para 160%. Se você deseja aumentar o contraste, aumente o valor tanto quanto você deseja.

.contraste
filtro: contraste (160%);

Saída

Um efeito de contraste adicionado com grande facilidade.

Escala de cinza

Vamos dar um pouco de um valor ao método de escala de cinza () e ver as mudanças na imagem.

.Escala de cinza
filtro: escala de cinza (100%);

Saída

Uma imagem colorida foi convertida em uma imagem em preto e branco usando o método de escala de cinza () da propriedade do filtro.

Hue-Rotate

Estamos atribuindo o método Hue-Rotate () 270 graus. Este método basicamente modifica as imagens girando a imagem em torno do círculo de cores.

.Hue-Rotate
Filtro: Rotate Hue (270DEG);

Saída

Esta é uma imagem com rotação de tonalidade de 270 graus.

Invertido

O valor invertido adiciona algum efeito especial à imagem invertendo -a. Aqui estamos invertendo a imagem 80%.

.Inverter
filtro: inverter (80%);

Saída

As amostras da imagem foram invertidas.

Opacidade

Para fazer uma imagem, o valor transparente de opacidade é usado. Abaixo, estamos ajustando a opacidade da imagem para 0.4. Quanto menor o valor da opacidade, mais a imagem se tornará transparente.

.opacidade
filtro: opacidade (0.4);

Saída

Esta é uma imagem com 40% de transparência.

Saturar

Para adicionar a saturação, o método Sattate () de propriedade de filtro é usado. Quanto mais o valor, mais será a saturação da imagem.

.saturar
filtro: saturar (4);

Saída

O efeito de saturação foi adicionado com sucesso à imagem.

Sépia

Com o objetivo de adicionar um efeito sépia à imagem, dê algum valor como nós atribuímos 50% no snippet de código abaixo.

.Sepia
filtro: sépia (50%);

Saída

O efeito sépia está funcionando corretamente.

Drop-shadow

Para adicionar uma sombra, estamos usando o método de shadow. O comprimento da sombra foi atribuído a cada lado da imagem.

.sombra
Filtro: Shadow Drop (8px 8px 10px vermelho);

Saída

O efeito de Shadow Drop foi adicionado com sucesso.

Agora que aprendemos sobre a propriedade do filtro em profundidade, vamos seguir em frente e ver o que é a propriedade refletida.

Reflexões de imagem no CSS

Com o objetivo de refletir imagens, a propriedade CSS Box-Reflect é usada.

Sintaxe

-Webkit-box-reflet: abaixo | acima | à direita | esquerda;

Para que esta propriedade funcione totalmente em vários navegadores, é usado com um prefixo “-Webkit-”.

Observação: O navegador Firefox não suporta a propriedade de reflexão de caixa.

Abaixo, demonstramos alguns desses valores com a ajuda de exemplos relevantes para que você possa pegar o conceito de reflexão de imagem.

Vamos primeiro adicionar uma imagem à nossa página da web.

Html

Aqui adicionamos uma imagem e damos alguma largura e altura.

Saída

Uma imagem foi inserida na página da web.

Abaixo

Basta atribuir a propriedade de reflexão de caixa “abaixo” o valor para refletir uma imagem abaixo da imagem original.

img
-webkit-box-reflet: abaixo;

Saída

A imagem foi refletida abaixo.

Certo

Vamos explorar o valor "certo" da propriedade de reflexão de caixa.

img
-webkit-box-reflet: certo;

Saída

A imagem foi refletida com sucesso à direita.

Conclusão

Com o objetivo de adicionar efeitos especiais às imagens que aparecem nos sites que a propriedade do filtro CSS é usada. Vários métodos que esta propriedade pode exibir são; Grayscale (), Satrate (), Opacity (), Blur (), Brilho (), Hue-Rotate (), etc. Além de adicionar efeitos especiais, você também pode refletir as imagens usando a propriedade CSS Box-refletir para a direita, esquerda, acima ou abaixo. Esta postagem abrange todas as profundidades de adicionar filtros ou reflexões às imagens com a ajuda de exemplos relevantes.