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

Cómo cambiar la ubicación de su carpeta de Dropbox

Dropbox es una de las mejores formas de compartir archivos, grandes o pequeños, en grandes cantidades a múltiples destinatarios. Muchos de nosotros damos por descontado el procedimiento de configuración de Dropbox porque nos ha sido tan fácil comenzar a compartir casi de inmediato. Algunos de ustedes incluso han intentado mover la ubicación de la carpeta de Dropbox fuera de la unidad C después de la instalación . No fu

(Consejos de tecnología y diseño)

Descifrando el código de NDA (Acuerdos de no divulgación)

Para los nuevos en la escritura independiente, el acuerdo de no divulgación o NDA puede ser algo aterrador. Debería ser aterrador. No es algo que deba tomarse a la ligera. Algunos escritores pueden ir por una carrera entera y nunca ver uno. Otros ven muchos. Es conocido por muchos nombres, nombres como:Acuerdo de información de propiedadAcuerdo de confidencialidadAcuerdo de confidencialidadAcuerdo de confidencialidadTodos ellos sirven como un acuerdo entre el profesional independiente (escritor, diseñador, desarrollador, redactor, etc.) y

(Consejos de tecnología y diseño)