Cómo aplicar filtros de Instagram en imágenes de la Web

A muchos les encanta usar Instagram y los filtros que vienen con la aplicación, para que sus fotos sean más interesantes y bellas. Hasta ahora, el uso de estos filtros está restringido para usarse dentro de la aplicación. ¿Qué sucede si desea utilizar filtros de Instagram en imágenes web, fuera de la aplicación, como fotos que desea colocar en su blog o sitio web personal?

Bueno, puedes usar CSSGram, una pequeña biblioteca que te permite editar 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 a través de 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 el modo de mezcla de CSS, básicamente combina los efectos hasta el punto en que imita el filtro de Instagram que desea. Los efectos se aplican al contenedor de imágenes, a través de pseudo-elementos. Veamos cómo se hace esto con este ejemplo de "1977":

Aquí está el pseudo-elemento agregado.

 ._1977 {position: relative; } ._1977: after {content: ''; bloqueo de pantalla; altura: 100%; ancho: 100%; arriba: 0; izquierda: 0; posición: absoluta; } 

Y este es el filtro CSS y Blend agregado:

 ._1977 {-webkit-filter: contraste (1.1) brillo (1.1) saturación (1.3); filtro: contraste (1.1) brillo (1.1) saturación (1.3); } ._1977: después de {background: rgba (243, 106, 188, 0.3); mix-blend-mode: pantalla; } 

Cómo utilizar

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

como un contenedor.

El código se verá así:

No olvide incluir la biblioteca de CSSgram (obténgalo aquí) en su documento HTML.

Creé la demo de imágenes antes y después de agregar filtro y el resultado es muy bueno. Hay 13 filtros incluidos en la biblioteca en este momento. A continuación puede ver las diferencias entre la imagen original y la imagen bajo los filtros " 1977 ", " Aden " y " Gingham ".

Vea el Pen rOKPmW

Si solo está interesado en utilizar cualquiera de los estilos, puede cargar los archivos CSS individuales en consecuencia.

Usando SCSS

Si desea agregar los filtros a su clase actual de contenedor de imágenes sin un cambio de nombre, puede hacerlo ampliando el efecto de filtro dentro de sus archivos SCSS. He aquí cómo hacerlo.

Primero descarga el archivo fuente SCSS e importa tu archivo SCSS.

 @import 'proveedor / cssgram'; 

Supongamos que tiene la estructura HTML como a continuación:

Luego, en su style.scss, extienda el filtro así:

 .my-class {... @extend% _1977; } 

Más publicaciones de Instagram

• 40 herramientas y aplicaciones para mejorar tu cuenta de Instagram
• 20 aplicaciones útiles para aprovechar al máximo Instagram
• 10 consejos y trucos útiles de Instagram que debes saber

15 ideas de regalo de bolsillo para ayudar a difundir el amor de Navidad

Probablemente haya verificado la mayoría de las ideas de regalos disponibles, pero si no le gustan los obsequios voluminosos que podrían hacer un agujero en su bolsillo, entonces revise las opciones de bolsillo que tenemos para usted en esta publicación. Encontrará lindas cámaras pequeñas, diseños creativos de unidades de memoria USB, copias de seguridad de baterías portátiles, un rastreador de actividades, una billetera delgada e incluso una máquina de café espresso con alimentación manual.Nota: Algun

(Consejos de tecnología y diseño)

19 talentosos artistas para seguir en Facebook

Las redes sociales son el hogar de muchos diseñadores y artistas que quieren hacerse un nombre. Presentamos algunos de los encontrados en Instagram, Dribbble y Tumblr. Para esta ronda, son los artistas que puedes encontrar en Facebook, y chico, tenemos una lista. Si estás buscando tu próxima solución creativa, aquí es donde deberías estar.En es

(Consejos de tecnología y diseño)