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

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.

Uso de filtros CSS

Aplicas filtros CSS usando el filtrar 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 variable CSS función. 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:

• difuminar()
• brillo()
• contraste()
• sombra paralela()
• escala de grises()
• matiz-rotar()
• invertir()
• opacidad()
• saturar()
• sepia()

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.

1. Escala de grises y sepia

El escala 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.

El sepia() 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:

imagen {
filtrar: escala de grises(14%) sepia(30%);
}

Combinatorio escala de grises() al 14% y sepia() al 30% puede crear un efecto vintage o retro en su imagen.

2. Invertir y saturar

El saturar() 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.

El invertir() 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:

imagen {
filtrar: invertir(30%) saturar(75%);
}

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

3. Tono-rotación y contraste

El matiz-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 el matiz-rotar() y contraste() los filtros pueden crear un efecto vibrante y colorido en sus imágenes.

Por ejemplo:

imagen {
filtrar: matiz-rotar(10grado) contraste(150%);
}

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

4. Brillo y desenfoque

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 el brillo() y difuminar() los filtros pueden crear un efecto soñador y suave en sus imágenes.

Por ejemplo:

imagen {
filtrar: brillo(0.8) difuminar(5píxeles);
}

El código anterior disminuye el brillo en 0.8 (80%) y aplica un 5px efecto de desenfoque a la imagen.

5. Sombra paralela y opacidad

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 el sombra paralela() y opacidad() los filtros pueden crear un efecto sutil en los elementos de texto.

Por ejemplo:

.efecto de texto {
transformar: traducir(-50%, -50%);
color: negro;
sombra paralela: 10píxeles 9píxeles 9píxelesbeige;
opacidad: 70%;
}

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

Uso de modos de fusión CSS

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:

• Creando degradados: Los modos de fusión se pueden usar para crear varios gradientes de fondo CSS esa transición entre colores, brindándole una manera fácil y eficiente de agregar profundidad y dimensión a sus diseños.
• Agregando textura: también puede usar modos de fusión para agregar textura a fondos, imágenes y otros elementos en una página. Esta puede ser una excelente manera de crear una apariencia única y agregar interés visual a elementos que de otro modo serían simples.
• Ajuste de colores: Con los modos de fusión, puede ajustar los colores de los elementos de una página, incluidos ajustando los colores de fondo. Esto le permitirá crear fácilmente efectos como superposiciones de color o imágenes tintadas.

Los dos modos de mezcla más comunes son modo de mezcla de fondo y mezclar-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 usar modo de mezcla de fondo cuando 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 el mezclar-mezclar-modo para mezclar el contenido de un elemento dado con el contenido de su padre directo. El mezclar-mezclar-modo se utiliza normalmente para combinar contenido de primer plano, como texto, formas o imágenes.

He aquí un ejemplo de uso mezclar-mezclar-modo para combinar texto e imagen.

HTML:

<divisiónclase="envase">
<imagen
 origen=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=comprimir&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=comprimir&cs=tinysrgb&w=1260&h=750&dpr=2"
 clase="imagen-de-fondo"
 />
<divisiónclase="contenido">
<h1>Bienvenidoh1>
<pag>¡Hola usuario!pag>
división>
división>

CSS:

.envase {
posición: absoluto;
ancho: 100%;
altura: 100%;
}
.imagen de fondo {
ancho: 100%;
altura: 100%;
ajuste de objeto: cubrir;
}
.contenido {
posición: absoluto;
arriba: 50%;
izquierda: 50%;
transformar: traducir(-50%, -50%);
texto alineado: centro;
mezclar-mezclar-modo: diferencia;
}
h1 {
tamaño de fuente: 60píxeles;
color: blanco;
}
pag {
tamaño de fuente: 40píxeles;
color: blanco;
}

El diferencia el 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.

Combinar filtros y modos de fusión

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:

.mi-elemento {
filtrar: brillo(150%) matiz-rotar(180grado) sombra paralela(0píxeles 0píxeles 10píxelesrgb(0, 0, 0, 0.5));
mezclar-mezclar-modo: pantalla;
}

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

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

Dominar filtros y modos de fusión

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.