Cómo aplicar filtros de Instagram en imágenes web

A muchos les encanta usar Instagram y los filtros que vienen con la aplicación, para hacer que sus fotos sean más interesantes y hermosas. Hasta ahora, sin embargo, el uso de estos filtros está restringido para usar dentro de la aplicación. Que tal si quieres Usa filtros de Instagram en imágenes web., fuera de la aplicación, como las fotos que desea colocar en su blog personal o sitio web?

Bueno, puedes usar CSSGram, una pequeña biblioteca que te permite edita tus fotos con filtros que son similares a los que puedes encontrar en la aplicación de Instagram. A diferencia de Photoshop, donde las ediciones son manuales o se realizan mediante acciones de Photoshop, con CSSGram, todo el proceso se realiza a través de CSS.

Cómo funciona

Para generar el efecto, CSSGram utiliza Filtros CSS y Modo de mezcla de CSS, básicamente mezclando los efectos hasta el punto en que imita el filtro de Instagram deseado. Los efectos se aplican al contenedor de imágenes, a través de pseudo-elementos. Veamos cómo se hace esto con este ejemplo "1977":

Aquí está el pseudo-elemento agregado.

 ._1977 posición: relativa;  ._1977: después de contenido: "; pantalla: bloque; altura: 100%; ancho: 100%; parte superior: 0; izquierda: 0; posición: absoluta; 

Y este es el filtro CSS y Blend añadido:

 ._1977 -webkit-filter: contraste (1.1) brillo (1.1) saturado (1.3); filtro: contraste (1.1) brillo (1.1) saturado (1.3);  ._1977: después de background: rgba (243, 106, 188, 0.3); mezcla-modo-mezcla: pantalla;  

Cómo utilizar

No podemos agregar la clase de filtro directamente al elemento de imagen, se debe agregar al contenedor o clase principal, por ejemplo con

 @import 'vendor / cssgram'; 

 .my-class … @extend% _1977;