Definitivamente algo que nos ha sorprendido a todos los desarrolladores web en los últimos años es el gran potencial que tiene CSS3 desde su lanzamiento, border redondeados, sobras, tipos de display, entre muchas otras cosas, pero sin duda una que en lo personal más me ha impactado, es la integración de filtros para estilizar las imagenes, definitivamente, desde mi punto de vista, es algo extraordinario.
Nota: Antes que nada, quiero aclarar que las funciones que estoy a punto de mostrarles, aun no se encuentran dentro del estandar de CSS3, por consecuente, es muy probable que estas funciones por el momento tengan que ir acompañadas de un prefix, o incluso que existan algunos navegadores que aún no las soporten, si ustedes desean saber más sobre la compatibilidad de navegadores, pueden consultar el sitio «can I use».
Ahora bien, ¿Que son los filtros?, digamos que, un filtro es como una etapa de procesamiento posterior a la carga de la página que hace algo genial antes de elaborar el contenido final del sitio. Veran, cuando el navegador carga un sitio web, carga primero el html y posteriormente aplica los estilos CSS, una vez que los estilos terminan de aplicarse, entra a un proceso de precarga justo antes de que el contenido se muestre en el navegador, y es ahí, cuando se aplican los filtros. Digamos que es algo como colocar un lente a la parte posterior de una camara, nosotros vemos al observar por la camará, el mundo real, pero pasado por el filtro, que es lo que al final le da un efecto muy hermoso.
Y en fin, de manera general, así es como funcionan los filtros, ahora bien, pasemos a lo interesante, ¿Cuales son los filtros que podemos utilizar en CSS3 ?, bien, veamos varios!
Grayscale ( Escala de grises )
.contenedor div:last-child img
{
width: 100%;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
Sepia
.contenedor div:last-child img
{
width: 100%;
filter: sepia(80%);
-webkit-filter: sepia(80%);
-moz-filter: sepia(80%);
}
Saturate ( Saturación de color )
Por alguna razón, en chrome (donde lo estoy testeando), no es necesario poner el porcentaje para aplicarle el filtro a la imagen.
.contenedor div:last-child img
{
width: 100%;
filter: saturate(10);
-webkit-filter: saturate(10);
-moz-filter: saturate(10);
}
Hue-rotate ( Rotación de color )
Esta instrucción toma los colores alrededor de la imagen y los rota para mostrar una configuración de colores completamente diferente y lograr un aspecto totalmente diferente.
.contenedor div:last-child img
{
width: 100%;
filter: hue-rotate(90deg);
-webkit-filter: hue-rotate(90deg);
-moz-filter: hue-rotate(90deg);
}
Invert ( Inversión de colores o negativo )
.contenedor div:last-child img
{
width: 100%;
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
}
Opacity ( Opacidad de la imagen o transparencia)
Los rangos de selección de opacidad estan entre 0 y 1
.contenedor div:last-child img
{
width: 100%;
opacity: 0.5;
}
Brightness ( Brillo )
.contenedor div:last-child img
{
width: 100%;
filter: brightness(150%);
-webkit-filter: brightness(150%);
-moz-filter: brightness(150%);
}
Contrast
.contenedor div:last-child img
{
width: 100%;
filter: contrast(200%);
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
Blur ( Difuminado )
.contenedor div:last-child img
{
width: 100%;
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
}
Drop-Shadow(shadow)
imagenes de uno nunca termina de conocer a las personas
.contenedor div:last-child img
{
width: 100%;
filter: drop-shadow(10px -16px 30px black);
-webkit-filter: drop-shadow(10px -16px 30px black);
-moz-filter: drop-shadow(10px -16px 30px black);
}