Cómo agregar filtros y reflexiones a las imágenes en CSS?

La apariencia de un sitio web es muy crucial si tiene la intención de atraer más y más audiencias a su sitio web. Por lo tanto, para mejorar el aspecto general de un sitio web, se recomienda en gran medida la adición de efectos gráficos a las imágenes o las imágenes reflejando. CSS proporciona varias propiedades que le permiten cumplir con estas tareas con facilidad. Hemos discutido estas propiedades en detalle en este artículo. En esta publicación, hemos discutido lo siguiente.

1. Filtros de imagen en CSS
2. Reflexiones de imagen en CSS

Filtros de imagen en CSS

Con el fin de agregar varios efectos especiales a una imagen como opacidad, desenfoque, saturación, etc., se utiliza la propiedad del filtro CSS.

Sintaxis

Filtro: valor;

Los diferentes métodos asociados con la propiedad del filtro se explican a continuación.

Valor	Descripción
ninguno	Este valor no agrega efecto y es un valor predeterminado.
difuminar	Agrega desenfoque a la imagen y hace que el valor en los píxeles.
brillo	Se usa para aumentar o disminuir el brillo de una imagen y exhibir valores en porcentaje.
contraste	Este valor sintoniza el contraste de una imagen y los valores se definen en porcentaje.
escala de grises	Transforma una imagen en una imagen en escala de grises y también exhibe valores en porcentaje.
tope	Este valor se usa para rotar una imagen y hace valores en grados.
invertir	Invertida las muestras que existen en la imagen y los valores se definen en porcentaje.
opacidad	Este valor ajusta la transparencia de una imagen y toma valores de 0 a 1.
saturar	Satura una imagen tomando valores en porcentaje.
sepia	Este valor se utiliza para convertir una imagen en sepia y exhibir valores en porcentaje.
sombra de caída	Se usa para aplicar un efecto de sombra en la imagen.
url ()	Es una función que requiere la ubicación de un documento XML que contiene un filtro SVG y puede representar un enlace a un elemento de filtro particular.
inicial	Este valor le da a la propiedad su valor inicial.
heredar	Este valor hereda la propiedad del filtro del elemento del antepasado.

Ahora que conoce todos los valores que puede exhibir una propiedad de filtro, a continuación hemos demostrado estos valores para una mejor comprensión.

En primer lugar, agregemos una imagen a nuestra página web utilizando HTML básico.

Html

Aquí simplemente hemos agregado una imagen usando la etiqueta.

CSS

img
Ancho: 30%;
Altura: Auto;

Ahora estamos usando CSS básico para dar algo de ancho y altura a la imagen.

Producción

La imagen se ha agregado a la página web.

Ahora apliquemos filtros a esta imagen y exploremos los diversos valores que puede exhibir la propiedad del filtro.

Difuminar

Hemos establecido el efecto desenfoque en 2px. El mayor valor del método de desenfoque aumentará la desenfoque.

.desenfoque
Filtro: desenfoque (2px);

Producción

Esta es una imagen borrosa.

Brillo

El brillo de la imagen se ha establecido en 0.50. Una reducción en el valor dará como resultado una caída en el brillo y viceversa.

.brillo
Filtro: brillo (0.50);

Producción

El brillo de la imagen se ha ajustado con éxito.

Contraste

Hemos establecido el contraste de la imagen al 160%. Si desea aumentar el contraste, aumente el valor tanto como desee.

.contraste
Filtro: contraste (160%);

Producción

Un efecto de contraste agregado con gran facilidad.

Escala de grises

Damos un valor al método GrayScale () y veamos los cambios en la imagen.

.escala de grises
Filtro: escala de grises (100%);

Producción

Una imagen de color se convirtió en una imagen en blanco y negro utilizando el método GrayScale () de la propiedad del filtro.

Tope

Estamos asignando el método tono-rotate () 270 grados. Este método básicamente modifica las imágenes girando la imagen alrededor del círculo de color.

.tono-rotate
Filtro: tono-rotación (270 grados);

Producción

Esta es una imagen con rotación de tono de 270 grados.

Invertir

El valor invertido agrega algún efecto especial a la imagen al invertirla. Aquí estamos invirtiendo la imagen 80%.

.invertir
Filtro: invertir (80%);

Producción

Las muestras de la imagen han sido invertidas.

Opacidad

Para hacer una imagen se utiliza el valor de opacidad transparente. A continuación estamos ajustando la opacidad de la imagen a 0.4. Cuanto menos sea el valor de la opacidad, más la imagen se volverá transparente.

.opacidad
Filtro: opacidad (0.4);

Producción

Esta es una imagen con 40% de transparencia.

Saturar

Para agregar saturación, se utiliza el método saturado () de la propiedad del filtro. Cuanto más sea el valor, más será la saturación de la imagen.

.saturar
Filtro: saturar (4);

Producción

El efecto de saturación se agregó con éxito a la imagen.

Sepia

Con el fin de agregar un efecto sepia a la imagen, dale algún valor como lo hemos asignado 50% en el siguiente fragmento de código.

.sepia
Filtro: sepia (50%);

Producción

El efecto sepia funciona correctamente.

Sombra de caída

Para agregar una sombra, estamos utilizando el método de sombra de caída. La longitud de la sombra se ha asignado a cada lado de la imagen.

.sombra
Filtro: Shadow (8px 8px 10px rojo);

Producción

El efecto de shadow de caída se agregó con éxito.

Ahora que hemos aprendido sobre la propiedad del filtro en profundidad, avancemos y veamos qué es la propiedad refleja.

Reflexiones de imagen en CSS

Con el fin de reflejar imágenes, se utiliza la propiedad CSS Box-Reflect.

Sintaxis

-WebKit-Box-Reflect: a continuación | arriba | Derecha | izquierda;

Para que esta propiedad funcione completamente en varios navegadores, se usa con un prefijo "-webkit-".

Nota: El navegador Firefox no admite la propiedad de reflectar de caja.

A continuación, hemos demostrado algunos de estos valores con la ayuda de ejemplos relevantes para que pueda obtener el concepto de reflexión de la imagen.

Primero agregemos una imagen a nuestra página web.

Html

Aquí hemos agregado una imagen y le damos un ancho y altura.

Producción

Se insertó una imagen en la página web.

Abajo

Simplemente asigne el valor de la propiedad de reflejo de cuadro "abajo" para reflejar una imagen debajo de la imagen original.

img
-webkit-box-reflect: a continuación;

Producción

La imagen se ha reflejado a continuación.

Bien

Explore el valor "correcto" de la propiedad de reflectar de caja.

img
-webkit-box-reflect: Right;

Producción

La imagen se reflejó con éxito a la derecha.

Conclusión

Con el fin de agregar efectos especiales a las imágenes que aparecen en los sitios web, se utiliza la propiedad del filtro CSS. Varios métodos que puede exhibir esta propiedad son; GrayScale (), Saturate (), Opacity (), Blur (), Brillo (), Hue-Rotate (), etc. Además de agregar efectos especiales, también puede reflejar imágenes utilizando la propiedad CSS Box-Reflect a cualquiera de las derechas, a la izquierda, arriba o abajo. Esta publicación cubre todas las profundidades de agregar filtros o reflexiones a imágenes con la ayuda de ejemplos relevantes.