En este tutorial utilizaremos la propiedad filter de CSS3 para aplicar los efectos de instagram a nuestras imágenes y fotografías.
En esta ocasión utilizaremos la propiedad filter de CSS3 con todas sus variantes, para aplicar a las imágenes efectos de la popular red social Instagram.
CSS3 nos permite aplicar efectos de procesamiento digital de imágenes a cualquier imagen, con la propiedad filter, esta propiedad tiene múltiples efectos a continuación veremos cada uno de ellos.
filter: grayscale(1);Convierte a la imagen en una imagen en formato de escala de grises, una escala de grises se produce al colocar tanto en R, G y B, el promedio de los tres valores iniciales. El parámetro de entrada puede ser en número (0 a 1) o en porcentaje (0 a 100%).
filter: sepia(1);Este efecto de un anaranjado en saturación débil es uno de los más comunes, su parámetro al igual que el anterior puede ser un número o un porcentaje.
filter: saturate(3);La saturación se define como la pureza de un color, mientras más alta sea esta, será un color mucho más vivo. El parámetro puede ser un número o un porcentaje, un estado neutro sin cambios se produce con el valor 1 o 100%, con valores menores el efecto será el contrario oscureciendo los colores. Pasado el valor de 10 se habla de sobresaturación.
filter: hue-rotate(60deg);El matiz es un parámetro de apariencia del color representada en una circunferencia, con la propiedad hue-rotate podemos rotar los colorer iniciales un número determinado número de grados en la rueda de matiz, el parámetro está especificado en grados (0deg a 360deg).
filter: invert(1);El invertir el color de una imagen consiste en cambiar a cada píxel el número de su escala RGB por su complemento. Por ejemplo un rgb(30,40,50) al convertirlo será rgb(255-30,255-40,255-50). Por esto los colores oscuros pasan a ser claros y los claros pasan a ser oscuros. El parámetro puede ser un número o un porcentaje.
filter: opacity(0.5);Aplica una transparencia a cada pixel de la imagen, su valor de entrada puede ser un número o un porcentaje a diferencia de los anteriores efectos un 1 o un 100% deja la imagen sin cambios y al disminuir la escala la imagen se hace transparente.
filter: brightness(2);El aumentar el brillo en una imagen es darle luminosidad, esto se consigue aumentando los valores de cada uno de los píxeles en un determinado número acercándolos hacia el tono blanco. Al igual que la saturación el parámetro puede ser un número o un porcentaje, siendo sus estados neutros 1 y 100%, menores a estos valores se producirá oscurecimiento en vez de aclarar la imagen.
filter: contrast(2);El contraste se define como la delimitación entre las zonas claras y las zonas oscuras, mientras más contraste tenga una imagen esta diferenciación se percibirá con más claridad. El parámetro puede ser un número o un porcentaje siendo sus estados neutros 1 y 100%, menores a estos valores se producirá dispersión en lugar de una delimitación.
filter: blur(2px);La difuminación aplica un filtro gaussiano que produce una mezcla de un píxel con sus vecinos, el parámetro es justamente el radio (en píxeles) que abarcará esta mezcla para producir la difuminación.
Los filtros de instagram son combinaciones de estos filtros que hemos utilizado anteriormente en un grado específico, a continuación veremos 3 de mis filtros favoritos.
.lofi {
filter: saturate(1.1) contrast(1.5);
}
.brannan {
filter: sepia(0.5) contrast(1.4);
}
.clarendon {
filter: contrast(1.2) saturate(1.35);
}
Y así es como se generan los diversos filtros. En el siguiente codepen podrás encontrar las configuraciones de más de 20 filtros dentro del CSS, además de una aplicación en la que podrás interactuar con ellos.
Si deseas aprender mas de desarrollo web, recuerda que en Devcode tenemos el Curso de CSS3 y muchos otros cursos esperando por ti para ayudarte a complementar tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.