Blog personal de IT, viajes y otros hobbies

filtros css featured

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.

[ciu_embed feature="css-filters"]

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.

Anterior

Reto Javascript 30 – Ejercicio #2

Siguiente

¿Se puede trabajar desde un hotel de 5 estrellas?

  1. Alessandro Degiusti

    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 🙂

    • 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!

  2. El generador de filtros CSS es genial! Muchas gracias Mauricio!

Deja una respuesta

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

Funciona con WordPress & Tema de Anders Norén