Cómo aplicar efectos visuales con filter en CSS
¿Qué es filter y cómo se utiliza?
filter es una propiedad que se usa para aplicar una o más funciones de filtro sobre un elemento, similar a los filtros de aplicaciones de edición de imágenes. Cada función de filtro realiza una transformación gráfica específica, que puede aplicarse individualmente o en combinación para crear efectos más complejos.
Sintaxis básica:
.elemento {
filter: blur(5px) brightness(1.2);
}
En el ejemplo anterior, la imagen o el contenedor con clase .elemento tendrá un desenfoque de 5 píxeles y un aumento de brillo del 20%, lo que produce un efecto visual distintivo.
Funciones de filtro disponibles en filter
1. blur(): Aplica un desenfoque a la imagen o elemento.
filter: blur(10px);-
blur(10px): Desenfoque de 10 píxeles.
2. brightness(): Ajusta el brillo del elemento.
filter: brightness(1.5);-
brightness(1.5): Aumenta el brillo al 150%.
3. contrast(): Modifica el contraste del contenido.
filter: contrast(200%);-
contrast(200%): Duplica el contraste de la imagen.
4. grayscale(): Convierte la imagen a escala de grises.
filter: grayscale(100%);-
grayscale(100%): Convierte la imagen a blanco y negro.
5. sepia(): Aplica un tono sepia, simulando un filtro de foto antigua.
filter: sepia(80%);-
sepia(80%): Aplica un efecto sepia del 80%.
6. saturate(): Ajusta la saturación de los colores.
filter: saturate(2);-
saturate(2): Aumenta la saturación al 200%.
7. invert(): Invierte los colores del elemento.
filter: invert(100%);-
invert(100%): Invierte los colores completamente, creando un efecto negativo.
8. hue-rotate(): Rota el matiz de los colores.
filter: hue-rotate(90deg);-
hue-rotate(90deg): Rota los colores en 90 grados.
9. opacity(): Ajusta la opacidad del elemento.
filter: opacity(50%);-
opacity(50%): Reduce la opacidad al 50%.
10. drop-shadow(): Aplica una sombra similar a box-shadow, pero con soporte para contornos no rectangulares (transparencias).
filter: drop-shadow(5px 5px 10px gray);-
drop-shadow(5px 5px 10px gray): Sombra con un desplazamiento de 5px en ambos ejes, con un desenfoque de 10px y color gris.
Ejemplos de uso con filter
1. Desenfoque de fondo en una imagen:
.imagen-desenfocada {
filter: blur(8px);
}Crea un desenfoque de 8 píxeles en la imagen, ideal para fondos o efectos de profundidad.
2. Efecto de imagen en blanco y negro:
.imagen-grayscale {
filter: grayscale(100%);
}Convierte la imagen a blanco y negro, útil para crear efectos monocromáticos.
3. Combinación de filtros:
.combinacion {
filter: brightness(1.2) contrast(90%) sepia(50%);
}En este ejemplo, se combinan el aumento de brillo, una reducción leve del contraste y un filtro sepia para lograr un efecto vintage.
4. Sombra con drop-shadow():
.sombra {
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
}
Aplica una sombra más suave y adaptativa que box-shadow, especialmente útil para elementos con formas transparentes.
5. Rotar el matiz para cambiar el color:
.imagen-color {
filter: hue-rotate(180deg);
}Cambia los tonos de la imagen, ideal para ajustar el esquema de color o crear efectos psicodélicos.
¿Cuándo usar filter en CSS?
- Para crear efectos visuales: Como desenfoques, sombras o variaciones de color, sin necesidad de manipular las imágenes fuente.
- En imágenes de fondo y superposiciones: Mejora la estética y el enfoque del contenido.
- Al manipular SVGs: Los filtros son efectivos en gráficos vectoriales, mejorando su apariencia sin perder calidad.
Consideraciones al usar filter
-
Rendimiento: Algunos filtros (especialmente
blur()ydrop-shadow()) pueden ser costosos en términos de rendimiento, especialmente en elementos grandes o en animaciones. - Compatibilidad de navegadores: La mayoría de las funciones son compatibles con navegadores modernos, pero se recomienda verificar en proyectos que requieran soporte para navegadores más antiguos.
Referencia oficial
Para más detalles sobre esta propiedad, consulta la documentación oficial de MDN sobre filter.
Jorge García
Fullstack developer