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 )

grayscale

 Sepia

sepia

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. instantánea4

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. hue-rotate

 Invert ( Inversión de colores o negativo )

invert

Opacity ( Opacidad de la imagen o transparencia)

Los rangos de selección de opacidad estan entre 0 y 1 opacity

Brightness ( Brillo )

brightness

 Contrast

constrast

 Blur ( Difuminado )

blur

Drop-Shadow(shadow)

shadow    

Quizá también te interese

Utilizando ES6 en tus aplicaciones Node
Creando dialogos personalizados en Java con JDIalog
Creando dialogos personalizados en Java con JDIalog
Estamos de vuelta, y más fuertes que nunca.
ECMAScript 6, lo nuevo.

Ivan Alvarado Diaz

Ingeniero en sistemas computacionales, apasionado por la tecnologia, programador, siempre con ganas de aprender mas y comprometido con mi trabajo.