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

50 Taza De Café No le importará Conseguir un cambio

Si eres un gran amante del café como yo, nunca tendrías suficientes tazas de café . Una buena taza de café o incluso té te hace sentir como en casa y acogedor, incluso en la oficina. En lugar de simplemente una pieza de cerámica aburrida, estos días, las tazas pueden ser una obra de arte o un objeto que muestra el gusto personalizado de sus dueños .Sin emb

(Consejos de tecnología y diseño)

Cómo descargar e instalar aplicaciones en la versión anterior de iOS

iOS 8 viene con muchas mejoras y muchas características nuevas como Continuity, Apple Pay y SMS Relay. Lamentablemente, muchas de estas funciones no funcionarán en dispositivos Apple anteriores, como el iPhone 4, debido a limitaciones. Peor aún, muchas aplicaciones ahora requerirán al menos iOS 7 para funcionar sin problemas . In

(Consejos de tecnología y diseño)