Cómo Aplicar Filtros De Instagram En Las Imágenes De Un Sitio Web

Existen usuarios que aman y han utilizado Instagram y los filtros que la aplicación brinda, para que sus fotos se vean mucho más interesantes y hermosas. Sin embargo, el uso de estos filtros de Instagram se limitan a utilizar dentro de la aplicación; pero, ¿Qué pasa si quieres utilizar los filtros de Instagram en imágenes de la web? Es decir, ya sea en el desarrollo de una web app, en un sitio que desarrolles, o tu blog personal.

Tranquilo, ahora puedes utilizar CSSGram, una pequeña biblioteca que te permite usar tus fotos con filtros que son similares a lo que puedes encontrar en la aplicación de Instagram. A diferencia de editar las fotos en Photoshop, con CSSGram, todo el proceso se realiza a través de CSS, lo cual es bastante útil para mejorar la velocidad de carga del sitio web.

Cómo funciona

Para generar el efecto, CSSGram utiliza filtros CSS y modo de mezcla CSS, básicamente la mezcla de los efectos en el punto en el que imita el filtro de Instagram deseado. Los efectos se aplican al contenedor de imagen, a través de pseudo-elementos. Vamos a ver cómo se hace esto con el ejemplo «1977»:

Aquí está el pseudo-elemento añadido.

1
2
3
4
5
6
7
8
9
10
11
12

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

Y este es el filtro de CSS y Blend añadido:

1
2
3
4
5
6
7
8

._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 añadir la clase de filtro directamente al elemento de imagen, tiene que ser añadido a la clase de contenedor o de los padres, por ejemplo, con figure como un contenedor.

El código se verá así:

1
2
3

<figure class="_1977">
   <img src="https://jagonzalez.org/como-aplicar-filtros-de-instagram-en-las-imagenes-de-un-sitio-web/" alt="" />
</figure>

No olvides incluir la biblioteca CSSgram en el documento HTML de la siguiente manera.

1

<link rel="stylesheet" href="path/to/cssgram.css">

Existen 13 filtros incluidos en la biblioteca en este momento. A continuación puede ver las diferencias entre la imagen original y la imagen con los filtros «1977», «Aden» y «Guinga».

See the Pen rOKPmW by Agus Eko Setiyono (@agusesetiyono) on CodePen.

Usando SCSS

Si deseas agregar los filtros para la clase contenedora de la imagen actual sin un cambio de nombre, puedes hacerlo mediante la extensión del efecto de filtro dentro de sus archivos SCSS. A continuación veras como hacerlo:

En primer lugar descargar el archivo de origen SCSS e importar el archivo SCSS.

1

@import 'vendor/cssgram';

Suponga que tiene la estructura HTML de la siguiente manera:

1
2
3

<div class="my-class">
  <img src="https://jagonzalez.org/como-aplicar-filtros-de-instagram-en-las-imagenes-de-un-sitio-web/" alt="" />
</div>

Luego, en su archivo style.scss, extender el filtro de la siguiente manera:

1
2
3
4

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

Te ha parecido útil esto? Ayudame a que llegue a mas gente, te agradecería un Like, un +1 o un trino 😀