Blog

May 11, 2023

Cómo usar filtros CSS y modos de fusión para crear efectos visuales

El filtro CSS y los modos de fusión son herramientas poderosas para aplicar fácilmente impresionantes

El filtro CSS y los modos de fusión son herramientas poderosas para aplicar fácilmente impresionantes efectos visuales a su página web sin necesidad de un código complejo.

El filtro CSS y los modos de fusión le permiten aplicar fácilmente efectos visuales a su página web. Los filtros son un conjunto de funciones CSS predefinidas que se utilizan para ajustar la representación de imágenes u otros elementos HTML. Mientras que los modos de fusión determinan cómo un elemento debe fusionarse con su fondo o elementos vecinos.

Aplicas filtros CSS usando elfiltrar propiedad y una propiedad que especifica el tipo de efecto aplicado. Cada propiedad de filtro es una función CSS, que funciona de manera similar a una función de variable CSS. Acepta un parámetro para especificar cuánto debería afectar el filtro al elemento con estilo.

Hay 10 funciones de filtro CSS disponibles para diseñar su elemento HTML:

Puede usar estos filtros individualmente o en combinación para crear estilos únicos y mejorar la apariencia de sus elementos HTML.

Algunos de estos filtros funcionan mucho mejor con otros cuando se usan de la manera correcta.

Estos son ejemplos de combinación de filtros CSS para lograr diferentes efectos visuales en un elemento de imagen.

Elescala de grises() El filtro elimina toda la información de color de una imagen o elemento de texto. El filtro toma un valor entre 0 y 1, siendo 0 el color original y 1 el efecto de escala de grises completo.

Elsepia() El filtro aplica un efecto de tono sepia a una imagen o elemento de texto. El filtro también toma un valor entre 0 y 1.

Por ejemplo:

Combinatorioescala de grises()al 14% ysepia()al 30% puede crear un efecto vintage o retro en su imagen.

Elsaturar() filtro aumenta o disminuye la saturación de una imagen o elemento de texto. El filtro toma un valor entre 0 e infinito, siendo 1 el color original y los valores más altos aumentan la saturación.

Elinvertir() El filtro invertirá los colores de una imagen o elemento de texto cambiando el tono de cada color presente en 180 grados en la rueda de colores. Esto significa que el filtro cambia los niveles de brillo y saturación del elemento mientras mantiene el tono.

Por ejemplo:

Este código invierte los colores de la imagen y aumenta la saturación en un 75%.

Elmatiz-rotar() El filtro rota los tonos de una imagen o elemento de texto, lo que significa que cambia el color general del elemento mientras mantiene los niveles de brillo y saturación. La cantidad de rotación se puede especificar en grados, donde 0 representa el color original y 360 representa una rotación completa de regreso al color original.

Combinando elmatiz-rotar()ycontraste()los filtros pueden crear un efecto vibrante y colorido en sus imágenes.

Por ejemplo:

Hue-rotate puede aceptar un valor degrado,graduado,radical, odoblar . El código anterior gira el tono de la imagen 10 grados y aumenta el contraste.

Los filtros de brillo y desenfoque se explican por sí mismos. El primero ajustando el brillo de tu imagen, y el segundo controlando el nivel de desenfoque aplicado.

Combinando elbrillo()ydifuminar()los filtros pueden crear un efecto soñador y suave en sus imágenes.

Por ejemplo:

El código anterior disminuye el brillo en0,8 (80%)y aplica un5pxefecto de desenfoque a la imagen.

Un efecto de sombra paralela es un efecto visual en el que un elemento parece proyectar una sombra sobre la superficie detrás de él, dando la ilusión de profundidad y dimensionalidad. Las sombras se aplican a menudo al texto o las imágenes para crear una sensación de separación entre el elemento y el fondo.

Mientras tanto, el filtro de opacidad controla la transparencia de un elemento.

Combinando elsombra paralela()yopacidad()los filtros pueden crear un efecto sutil en los elementos de texto.

Por ejemplo:

En este ejemplo, la sombra paralela se coloca 10 píxeles a la derecha y 9 píxeles hacia abajo, con un radio de desenfoque de 9 píxeles. El color de la sombra se especifica como beige. También se especifica una opacidad del 70%.

Los modos de fusión de CSS controlan cómo el contenido de un elemento se combina con el fondo u otros elementos, lo que permite efectos de composición creativos.

Algunos de los casos de uso más populares para los modos combinados de CSS incluyen:

Los dos modos de mezcla más comunes sonmodo de mezcla de fondoymezclar-mezclar-modo . Ambas propiedades comparten los mismos 15 valores: normal, multiplicar, pantalla, superposición, oscurecer, aclarar, sobreexponer color, saturación, sobreexposición de color, luminosidad, diferencia, luz dura, luz suave, exclusión y matiz.

Deberías usarmodo de mezcla de fondocuando tiene varios diseños de fondo, como imágenes de fondo en un elemento, y desea que todos se mezclen entre sí.

También podrías usar elmezclar-mezclar-modo para mezclar el contenido de un elemento dado con el contenido de su padre directo. Elmezclar-mezclar-modose utiliza normalmente para combinar contenido de primer plano, como texto, formas o imágenes.

He aquí un ejemplo de usomezclar-mezclar-modopara mezclar texto e imagen.

HTML:

CSS:

Eldiferenciael modo de fusión calcula la diferencia absoluta entre los valores de color del texto y la imagen oscura subyacente.

En este escenario, el color del texto interactuaría con el fondo oscuro, dando como resultado un efecto de alto contraste.

Puede combinar filtros y modos de fusión para crear efectos visualmente aún más interesantes. Al usar ambas propiedades juntas, puede lograr resultados únicos y creativos que son difíciles de replicar con otras propiedades de CSS.

Aquí hay un ejemplo que combina el filtro y el modo de fusión para crear un efecto más complejo:

Este código combina los filtros;brillo,matiz-rotar,sombra paralela, y unmezclar-mezclar-modode valorpantalla a la imagen Aumenta el brillo en un 150%, mientras hue-rotarinvertirá los colores de la imagen en 180 grados.

Luego también, se aplica una sombra paralela. Por último, elpantallaEl valor para el modo de fusión combinará los colores de la imagen con el fondo subyacente, dando como resultado un efecto en el que los colores más claros se intensifican y los colores más oscuros se fusionan con el fondo.

Ha aprendido acerca de los diferentes tipos de filtros CSS y cómo puede aplicarlos a sus elementos HTML. Mediante el uso de varias funciones de filtro, como desenfoque, contraste y rotación de tonos, puede modificar la apariencia de sus imágenes. También ha visto ejemplos de modos de fusión en acción y cómo se pueden usar para crear diseños únicos.

Si experimenta más con estas técnicas, puede agregar un nivel adicional de interés visual a sus diseños.

Noble Okafor es un ingeniero de software experto con más de 3 años de experiencia en el campo de la programación. Le apasiona crear soluciones de software web y móviles nativas y multiplataforma con JavaScript optimizado. Se esfuerza por documentar sus conocimientos y lecciones a través de sus artículos técnicos con más de un año de experiencia en la escritura. El enfoque principal y el objetivo de estos artículos es simplificar las complejidades en torno a los temas de ingeniería de software.