Filtros directamente sobre imágenes

Lo primero que vamos a hacer es introducir una imagen en nuestro documento html cortesía de nuestro genio Felix Tavares:

Para usar los filtros css es importante saber que de momento solo se verán en navegadores webkit, como chrome y safari, por lo que debemos usar los correspondientes prefijos a la hora de crear el estilo CSS:

img {
-webkit-filter: filter(valor);
}

Cambio de tono: hue-rotate

Podemos modificar el tono de nuestra imagen con el filtro hue-rotate. El tono de un color es la posición que le corresponde a ese color dentro del círculo cromático (por eso se especifica en grados)  y determina si es un tono de azul, rojo, amarillo… Se lo aplicamos de la siguiente manera:

img {
-webkit-filter: hue-rotate(90deg);>
}

Escala de grises: grayscale

También podemos directamente pasar una imagen a escala de grises utilizando el filtro grayscale en nuestro CSS. No solo eso, como básicamente lo que hace el filtro es desaturar la imagen podemos elegir la cantidad de pérdida de saturación entre 0 y 100%, siendo 100% gris total:

img {
-webkit-filter: grayscale(100%);
}

Tono sepia: sepia

Como en Instagram! puedes aplicar directamente el filtro sepia y también graduar, de 0 a 100% la intensidad del efecto:

img {
-webkit-filter: sepia(100%);
}

Cambio de brillo: brightness

Variando el porcentaje de brillo podemos aclarar u oscurecer la imagen. Un 100% deja la imagen sin cambios, los valores menores que 100% la oscurecen y los mayores aclaran. En el ejemplo hemos puesto un 200% y veis la imagen bastante más brillante:

img {
-webkit-filter: brightness(200%);
}

Cambio de contraste: contrast

También podemos ajustar el contraste de la imagen para que se vea más o menos viva. Los valores funcionan igual que en brightness: 100% sin cambios, menor que 100% reduce el contraste (0% sería un gris plano) y valores mayores que 100% lo aumentan. En el ejemplo bajamos el contraste a la mitad:

img {
-webkit-filter: contrast(50%);
}

Invertir colores: invert

Invertir un color es cambiar ese color por su complementario. Por ejemplo, en una imagen en la que predominen los tonos rojos, al invertirla se verá azulada. Al usar el filtro invert también podemos graduar la intensidad de la inversión de colores con un valor en porcentaje. En el ejemplo invertimos la imagen del todo:

img {
-webkit-filter: invert(100%);
}

Desenfoque: blur

Vaya, ahora que se lleva el diseño plano me entero que se pueden desenfocar elementos directamente en CSS! Seguro que le vas a sacar partido, en este caso igual que en Photoshop cuando aplicamos un desenfoque gaussiano solo tenemos que especificar el radio en pixels:

img {
-webkit-filter: blur(5px);
}

Combinando filtros

Se pueden aplicar varios filtros a nuestra imagen, es tan sencillo como declararlos en la propiedad filter:

img {
-webkit-filter: blur(5px) grayscale(75%);
}

En el ejemplo desenfocamos la imagen un poco y la desaturamos un 75%

Esperamos que os haya resultado interesante, hay muchas opciones si usamos los filtros junto con animaciones y transiciones y lo más importante, cada vez dependemos menos de usar distintas imágenes a la que aplicamos estos filtros en Photoshop, ya que podemos hacerlo directamente en CSS.

Nos vemos en Nowe!