Filtros CSS

Oh, qué maravillosos son los filtros de CSS (en la escuela me enseñaron que si comienzo un texto con un «Oh» le da más importancia al asunto) aunque muy pocos desarrolladores los usan. Lo digo en serio, me gustaría navegar, encontrarme una foto blanco y negro, inspeccionarla y ver que el programador se curró un filtro CSS para convertirla en lugar de utilizar Photoshop (en el mejor de los casos), exportarla y subirla. Y es que en realidad molan un saco: se pueden convertir imágenes dinámicamente en blanco y negro, sepia, trabajar su contraste brillo, blur entre otros filtros con muy pocas líneas de código CSS.

Sintaxis

img {
	filter: blur(0px)
			brightness(1.8)
			contrast(0.53)
			grayscale(0)
			hue-rotate(104deg)
			invert(0)
			opacity(100%)
			sepia(0)
			saturate(1);
}

Obviamente no vamos a utilizar todos los filtros a la vez (o sí) pero es para que se den una idea de las diferentes opciones que tenemos y como podemos añadir más de uno al mismo elemento.

¿Dónde podemos utilizar los filtros?

Voy a describir algunas situaciones reales donde podríamos utilizar los filtros CSS.

Ejemplo 1

Supongamos que un cliente o el diseñador nos pide una web donde quiere dar de alta un listado de los empleados de su empresa para luego mostrarlos en un listado en blanco y negro en la homepage. Bien podríamos pedirle al cliente que suba las imágenes en blanco y negro pero estaríamos agregando un paso de dificultad al proceso de administración de la web. Como programadores podemos ahorrarle este paso agregando un par de líneas de CSS.

Listado de empleados en blanco y negro con filtros CSS
Listado de empleados en blanco y negro.
.empleado {
	-webkit-filter: grayscale(1); /* Safari 6.0 - 9.0 */
	filter: grayscale(1)
}

Ejemplo 2

También podríamos suponer que el cliente o el diseñador de la web nos pide que al hacer hover en el listado de los artículos (o de cualquier otro custom post type que tenga una imagen destacada) la imagen se convierta en blanco y negro con una transición. Al igual que el ejemplo anterior se puede resolver con un par de líneas de código CSS.

hover blanco negro filtros css
La imagen destacada del artículo se vuelve blanco y negro con el evento hover.
.articulo {
	cursor: pointer; /* para que al pasar el ratón por encima aparezca el icono de la mano */
	-webkit-transition: all 0.4s; /* Safari */
	transition: all 0.4s;
}
.articulo:hover {
	-webkit-filter: grayscale(1); /* Safari 6.0 - 9.0 */
	filter: grayscale(1)
}

Compatibilidad con navegadores

Los filtros de CSS están aceptados en todos los navegadores modernos a excepción de los IE (Ineptos Expertos) que dan cero compatibilidad en su versión 11 y parcial en Edge 14,15.

Tester de filtros

No pude resistirme a la tentación y realicé un pequeño tester de filtros CSS el cual va actualizando los valores a uno de los costados para que puedan copiarlo y utilizarlo en vuestras maquetas. En mi github puede encontrar el código fuente.

tester de filtros css
Tester de Filtros CSS

Pueden encontrar más información de los filtros CSS en las especificaciones técnicas de MDN.


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (1 votos, promedio: 5,00 de 5)
Cargando...
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


4 thoughts on “Filtros CSS”

  1. Excelente. Casi no puedo creer cuando veo un sitio web que usa dos imágenes para un simple efecto hover que se puede hacer en pocas líneas con CSS.

    Saludos che! Buen 2017 🙂

    1. A veces la ignorancia de ciertas cuestiones técnicas de CSS, HTML o Javascript lleva a los maquetadores a tomar decisiones nefastas. Tenés toda la razón.
      Muchas gracias compatriota.
      Un saludo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *