Cómo Aplicar Filtros de Instagram en el Navegador Utilizando Únicamente CSS

Bienvenidos a otro consejo rápido de Envato Tuts+; en el video de hoy vamos a hablar sobre filtros de instagram. Si eres un usuario de Instagram (y probablemente aún si no lo eres) te habrás percatado que ofrece varios filtros que puedes aplicar a una foto que vas a subir. Hoy en día puedes lograr resultados similares en el navegador utilizando nada más que CSS. ¡Echemos un vistazo!

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Mira el Video

Instagram.css

Instagram.css es una librería, disponible en Github, que hace todo el trabajo pesado por tí. Descárgala, luego agrégala a tu página web (o como un recurso en una ejemplo en Codepen).

Nuestra estructura HTML puede verse así:

<div class="demo-container">
  <figure>
    <img src="boat.jpg">
  </figure>
</div>

Tenemos un demo-container que estamos utilizando solo para centrar la imagen. La etiqueta <img> está encerrada en un <figure>, y es en ese <figure> al que agregaremos algunas clases.

Agregando una clase `filter-`

Actualmente hay más de 40 filtros disponibles, todos listados en la página de Github.Aquí está uno de dos ejemplos que puedes probar tú mismo en el ejemplo incluído abajo:

1977 filter-1977
Helena filter-helena
Kelvin filter-kelvin
Moon filter-moon
Poprocket filter-poprocket
Reyes filter-reyes
Sierra filter-sierra
Toaster filter-toaster
Valencia filter-valencia
Walden filter-walden

Please accept marketing cookies to load this content.

¿Cómo Funciona?

Si abres la versión no minificada de instagram.css verás que cada clase aplica la propiedad CSS filter, como ésta por ejemplo:

1	.filter-1977 {
2	filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
3	}

Otros van un paso más allá y agregan modos de fusión a un pseudo elemento colocado sobre la imagen:

.filter-amaro::before {
  background: rgba(125, 105, 24, .2);
  content: "";
  mix-blend-mode: overlay;
}

Los valores aplicados a filter y mix-blend-mode alteran los canales, la saturación y el brillo de la imagen, combinándose para darnos los efectos similares a Instagram. Éstos también son efectos muy poderosos, anteriormente solo posibles en el navegador con SVG.

Soporte de Navegadores

Filtros CSS son razonablemente bien soportados en navegadores modernos, inclulyendo la versión más reciente de Edge (13+). IE no ofrece soporte, y tampoco lo hace IE Mobile. Echa un vistazo a CanIUse para más detalles.

Conclusión

Eso es todo por éste consejo rápido; instagram.css ofrece una manera realmente rápida de aplicar algunos geniales efectos a tus imágenes en el navegador. Ve y descárgala, juega con ella, y conócela a fondo para aplicar tus propios filtros y efectos.