Dev Tuts, Geekologia

Filtros en CSS para aplicarle a tus imágenes, be a designer :).

En el desarrollo de aplicaciones webs y paginas web siempre solemos usar imágenes que nos ayudan a crear una atmósfera adecuada para nuestro proyecto, dependiendo de las emociones que queramos mostrar podrían ser, felicidad, tristeza, o cualquier otra que nos ayude a conectar con el usuario.

Los diseñadores tienen mucho cuidado en estos aspectos y de como el usuario se siente usando el producto, estos usan una gran variedad de programas para editar las fotos y agregarles cualquier cantidad de filtros, mascaras y otros efectos que enriquecen la imagen y ayudan a conectar con el usuario.

Suele pasar que a veces eso que hacemos los diseñadores puede ser un poco complicado a la hora de llevarlo a la etapa de desarrollo, y los desarrolladores prestan mucha atención al rendimiento de su código y ademas quieren que sus su proyecto web carguen rápido(todos lo deseamos), para esto ellos suelen bajar el peso de la imagen, esta es la razón por la que preferimos hacer estos efectos que el diseñador hace usando código, por ejemplo en un efectos de hover o click, no querríamos cargar dos imagines, eso nunca.

Hoy gracias a CSS3 podemos agregar filtros a nuestras imágenes de una manera fácil, por ejemplo en este articulo les mostrare cómo pueden ustedes algunos filtros a sus imágenes sin necesidad de usar photoshop o cualquier otro programa de diseño..

Escala de Grises [%/Números]

Este es uno de esos efectos que solemos necesita bastante dentro de nuestros proyectos, en esta ocasión podemos aplicarlo sin necesidad de tener que abrir photoshop, ademas este filtro es muy popular, así que poder hacerlo con código será genial.

En este filtro para su control puedes usar valores en porcentaje o un valor numérico, en el caso de valor de porcentaje irían desde 0% hasta el 100%, con respecto a los valores números irían desde el 0 hasta el valor 1, teniendo en cuenta que entre menor sea el valor el efecto se aplicara poco (suave) y entre mas alto el valor el efecto se ira aplicando a medida que subimos el valor y queda el efecto completamente aplicado.

En el efecto de arriba puedes ver cómo la foto inicialmente esta sin efecto aplicado con un valor de 0%, luego aplicamos el efecto a la imagen siguiente con un valor de a 0.5 y al final usamos porcentaje al 100%, para aplicar la totalidad del efecto de escala de grises sobre la fotografía, esto nos brinda un control muy interesante sobre el efecto..

Sepia [%/Números]

Este es otro efecto que también es muy requerido si quieres darle un toque de vejes a tus fotografías, la verdad es un efecto que es muy común y lo podemos ver por todos lados, así que ya era hora de poderlo usar solo usando código, en este caso funciona parecido al efecto de escala de grises, si quieres el efecto completamente aplicado usas los valores de 1 o 100%, y puedes variar entre ellos para ver el porcentaje con que se aplica a la imagen, aquí el ejemplo:

Arriba ya pueden ver cómo es el efecto aplicado sobre la imagen, lo genial de todo esto es que estamos trabajando la imagen solo con código, haciendo que el performance no se pierda en nuestro proyecto.

Blur o Desenfoque [px]

Este es uno de esos filtros que me encantan y poder usarlo en un hover, me parece muy lindo el efecto y como se mezclan los colores de una forma impresionante, es también uno de los efectos mas usados a nivel de diseño, en este caso ya no vamos a usar valores en porcentajes o números, esta vez vamos a usar valores expresados en pixeles, he aquí el ejemplo:

Aquí nuevamente vemos cómo podemos usar estos efectos, que suelen usar nuestros diseñadores en sus programas complejos, ahora nosotros tenemos la posibilidad gracias a CSS, y de esta manera aplicarlos en nuestras imágenes y cualquier objeto que deseemos.

Luminosidad o Brightness [%/Números]

Otro filtro que podemos usar en CSS es el de Luminosidad, que va afectar que tan clara o oscura se ven nuestras imágenes y de los objetos a los cuales le apliquemos el filtro, este efecto se aplica como en escala de grises y el de sepia, usando valores con porcentajes teniendo la posibilidad de llevar la imagen a un blanco total (casi) usando valores numéricos, como se ve en la imagen del ejemplo:

Aquí vemos el efecto aplicado, ahora sí pueden pensar en la forma en que pueden usarlo o sacarle el mayor provecho, es un efecto muy cool poder controlar que tan clara desde el código, brindándonos muchas posibilidades.

Contraste o Contrast [%/Numeros]

Otra propiedad o filtro que podemos controlar usando solo CSS, es el contraste de la imagen, en este caso el contraste es la configuración de luminosidad y color que hacen distinguible una imagen, pero esto es un poco de teoría, no hay nada como un ejemplo para poder evidenciar que sucede en la imagen:

Ya con este ejemplo del filtro de contraste podemos ver en acción el filtro y con ello podemos tener una perspectiva mas amplia del mismo y decidir dónde, cuando y como usarlo, cabe recordar que este filtro acepta valores en porcentajes y numéricos.

Saturación o Saturate [%/Numeros]

Otro efecto o filtro que también podemos controlar y aplicar usando solo código es la saturación, este filtro te da la posibilidad de definir la intensidad de los colores en la imagen y así poder pasarla a escala de grises a tener colores tan intensos que en imágenes con personas la piel se pone de color rojo, efectivamente como se ve en el ejemplo:

Ya viendo el efecto en acción podremos las capacidades de este filtro y que hacer con él en nuestros proyectos, por ejemplo una foto que te facilitaron con los colores apagados y quieres que se vean un poco mas vivos, este filtro te podría servir de maravilla.

Tono-Rotación o Hue-Rotation (deg)

Este efecto es muy interesante puedes controlar el tono de color de la imagen usando un circulo de color, en este caso imaginen el circulo de color con un indicador que cuando le indicamos los valores en grados el se ubica en ese circulo y afecta el tono de la imagen, pero como en todos los casos toca verlo en el ejemplo:

Ahora si podemos ver los cambios que suceden y jugar con ellos, tengan en cuenta la imagen de arriba donde podemos ver el posicionamiento según los grados, con esto podemos conseguir efectos interesantes y dependiendo de lo que queramos conseguir puede ser un filtro que nos salve la vida o ayude en una ocasión muy especifica, ya esto lo definirán ustedes.

Inversion o Invert [%/Numeros]

Ya para finalizar un filtro que también nos puede servir a la hora de editar nuestras imágenes con código, es el de invertir, que lo que hace es invertir los colores de la foto dandole un aspecto algo peculiar, este filtro acepta valores con números y porcentajes como en los filtros anteriores, cabe resaltar que no acepta valores negativos, ahora si vamos con el ejemplo:

Ahora si podemos apreciar el resultado final aplicado en la imagen usando este filtro, a mi parecer este seria un filtro de uso muy especifico, no creo que queramos aplicar este filtro a nuestras imágenes siempre, decidan como usarlo y como obtener provecho de este filtro ustedes mismos.

Conclusiones

Ahora viendo las posibilidades que nos brinda CSS3 para editar nuestras imágenes y agregarles efectos, sin tener que usar un programa de diseño y hacer configuraciones complejas, tener que exportar y ajustar nuevamente.

Con solo la imagen optimizada y aplicar los efectos sobre ella ya tenemos, claro de acuerdo a lo que requiramos en el proyecto, esto es solo una de las muchas posibilidades que nos brinda CSS3 y es esta la razón por la cual me encanta, dentro de esta categoría de filtros había dos mas pero no los quise tocar por que no funcionan como filtros en si.

En este caso esta la opacidad de la imagen que también la podemos controlar con números y porcentajes, ademas de esta también estaba la sobra paralela en las imágenes que también es un efecto o propiedad bastante interesante de usar, pero que no funciona como filtro.

Así que aprender CSS cómo locos y hacer cosas asombrosas en nuestros proyectos, ahora si se despide su fiel servidor y nos vemos en otra publicación, ¡Have a nice Coding!

Published by Canopart

Diseñador Visual, Geek, Fundador de Canolabs Agency, apasionado por la tecnología y el diseño, un soñador y formador nato, con un gusto enorme por el desarrollo Front End y el desarrollo de aplicaciones bajo macOS, no soy un Faboy de Apple pero me gustan sus productos.

Leave a Reply

Your email address will not be published. Required fields are marked *