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 al uso dentro de la aplicación. ¿Qué pasa si quieres usar filtros de Instagram en imágenes web, fuera de la aplicación, ¿le gustan las fotos que desea publicar en su blog o sitio web personal?

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

Cómo funciona

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

Aquí está el pseudo-elemento agregado.

	._1977{
		position: relative;
	}
	._1977:after{
		content: '';
		display: block;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
	}

Y este es el filtro CSS y Blend agregado:

	._1977 {
		-webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);
		filter: contrast(1.1) brightness(1.1) saturate(1.3); 
	}
	._1977:after {
		background: rgba(243, 106, 188, 0.3);
		mix-blend-mode: screen; 
	}

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 olvides incluir la biblioteca CSSgram (obtenla aquí) en tu documento HTML.

Creé la demostración de imágenes antes y después de agregar el 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 debajo de los filtros "1977","Adén"y"Guingán".

Ver el bolígrafo rOKPmW

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

Usando SCSS

Si desea agregar los filtros a su clase de contenedor de imagen actual sin un cambio de nombre, puede hacerlo extendiendo el efecto de filtro dentro de sus archivos SCSS. Aquí te explicamos cómo hacerlo.

Primero descargue el archivo fuente SCSS e importe su archivo SCSS.

@import 'vendor/cssgram';

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

Luego, en su style.scss, extienda el filtro de esta manera:

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

Más publicaciones de Instagram

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *