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

7 Arrastrar y soltar complementos para construir sitios de WordPress

El arrastrar y soltar ha sido el enfoque más apreciado por los no expertos en tecnología, cuando se trata de organizar diseños web. Esta es, tal vez, las razones por las que Wix, SquareSpace y tales servicios son tan populares. Solo por nombrar algunas herramientas más que te permiten hacer más con arrastrar y soltar, tenemos:Crea hermosos sitios web con IM CreatorEstilo personalizado con JQuery UI SortableCrea gráficos de aspecto profesional con Canva¡Crea diseños HTML Bootstrap con LayoutIt!Guarde,

(Consejos de tecnología y diseño)

5 mejores aplicaciones de Windows para monitorear el uso de Internet

Cuando obtiene Internet para su hogar o como estudiante, siempre hay un límite en el límite de uso de Internet . Pero cuando estás en línea, tiendes a dejarte llevar y a veces terminas agotando el paquete de Internet de un mes en un par de semanas.Puede haber múltiples razones para eso. Por ejemplo, algunos sitios web son más pesados ​​que los demás. Del mismo

(Consejos de tecnología y diseño)