🔗Índice

1. Introducción
2. blur()
3. brightness()
4. contrast()
5. drop-shadow()
6. grayscale()
7. hue-rotate()
8. invert()
9. opacity()
10. saturate()
11. sepia()
12. Filtros múltiples
13. ¿Por qué usar filtros?
14. Referencias
15. Conclusiones

1. Introducción

2. blur()

El filtro blur o desenfoque aplica un desenfoque gaussiano a una imagen. Recibe un parámetro radio que representa la cantidad de desenfoque que queremos. A mayor radio, mayor desenfoque. El radio solo admite unidades relativas o fijas pero no porcentajes.

3. brightness()

El filtro de brillo se encarga de oscurecer o aclarar una imagen. Recibe un parámetro que puede ser un porcentaje o un valor escalar.

Si es un porcentaje:

• Un valor menor a 100% oscurece la imagen.
• Un valor mayor a 100% aclara la imagen.

Si es un escalar:

• Un escalar pequeño oscurece la imagen (0 totalmente oscuro).
• Un escalar grande aclara la imagen.

4. contrast()

Ajusta el contraste de una imagen.

Si es un porcentaje:

• Un valor menor a 100% disminuye el contraste.
• Un valor mayor a 100% aumenta el contraste.

Si es un escalar:

• Un escalar pequeño disminuye el contraste (0 totalmente gris).
• Un escalar grande aumenta el contraste.

5. drop-shadow()

Aplica un efecto de sombra justo al contorno de las imágenes, ideal para sombras a png's.

Recibe de 2 a 4 parámetros:

• drop-shadow(5px 5px): el primero es la sombra en el eje x el segundo en el eje y.
• drop-shadow(5px 5px 15px): el tercero es el tamaño del difuminado.
• drop-shadow(5px 5px 15px red): el último es el color.

6. grayscale()

La escala de grises sirve para poner a una imagen en blanco o negro.

Recibe un parámetro que indica cuál será el nivel de la escala de grises.

Si es un porcentaje:

• 0% no afecta en nada a la imagen.
• 100% la convierte totalmente en blanco y negro. > No recibe porcentajes más grandes de 100%

Si es un número es la representación decimal del porcentaje, donde .5 es 50%, .75 es 75%, etc.

7. hue-rotate()

Permite aplicar un filtro de color recibiendo un ángulo como parámetro.

Si el ángulo:

• Es positivo aumenta el tono de color.
• Es negativo disminuye el tono de color.

El parámetro puede ser en deg, rad, etc.

8. invert()

Invierte los colores de una imagen en base el círculo cromático.
Recibe un porcentaje como parámetro que indica el grado de inversión que tendrá la imagen.

9. opacity()

Cambia el nivel de transparencia de una imagen. Es muy similar a la propiedad opacity pero la diferencia radica en que cuando usamos filtros es mas optimo por la aceleración de hardware que nos ofrece.

Recibe un porcentaje como parámetro donde a menor opacidad mas difuminada se verá la imagen.

10. saturate()

Satura la imagen. Recibe un porcentaje como parámetro.

• Menos del 100% desatura la imagen.
• Más del 100% sobresatura la imagen.

11. sepia()

Convierte un valor a sepia donde 100% es completamente sepia y 0 no altera el valor.

12. Filtros Múltiples

Es posible usar múltiples filtros al mismo tiempo, combinándolos para encontrar soluciones más óptimas a problemas concretos.
Un buen ejemplo es para mejorar la accesibilidad de un texto, veamos un ejemplo:

13. ¿Por qué usar filtros?

El uso de filtros en nuestros proyectos son más que recomendados por los siguientes puntos:

• Permite la edición de imágenes sin usar programas como Photoshop o similares.
• Su implementación es muy sencilla.
• Permite uso de pseudo clases como hover y filtros.
• Mejora la accesibilidad.
• Permite escribir sombras más avanzadas con drop-shadow().
• Algunos filtros tienen aceleración por hardware lo que significa que hacen uso de la GPU y no cargan tanto a la CPU del dispositivo brindando una capa extra de optimización.

14. Referencias

• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia

15. Conclusiones

Los filtros son una herramienta muy poderosa en CSS que permiten escribir estilos mas completos y sofisticados para nuestros desarrollos.

Destaco sobre todo el filtro drop-shadow para escribir sombras más avanzadas, muy útil para estilar contornos de imágenes sin fondo brindando un acabado profesional.

Como pudiste ver, tenemos gran cantidad de filtros en CSS que es importante tener siempre en mente para cuando necesitemos estas herramientas a nuestro alcance.

Consejo final: no es necesario que te aprendas de memoria como funciona cada filtro y que valores puede o no recibir, lo importante es saber que existen y que están a tu disposición cuando los necesites. La documentación oficial o posts como este siempre están disponibles para que los consultes cuando quieras.

¡Eso es todo!