La red social de las fotos empezó siendo usada como una herramienta para poner filtros y aunque esta función no es ya la principal, seguimos utilizándolos para mejorar nuestras fotos. Te contamos cómo añadir los filtros de Instagram a las fotos de tu web con CSS.
¿Cuáles son los filtros de Instagram?
Los filtros de Instagram permiten ajustar el tono de una foto, su perfil de color y ajustar sutilmente la apariencia de la instantánea. En Stories y en los directos de Instagram cada vez hay más novedades y filtros. En el caso de las noticias los filtros no se quedan cortos:
Clarendon, Lagos, Moon, Lark, Reyes, Juno, Slumber, Crema, Ludwig, Aden, Perpetua, Amaro, Mayfair, Rise, Hudson, Valencia, X-Pro II, Sierra, Willow, Low-fi, Inkwell, Hefe y Nashville.
El filtro Valencia es uno de los más conocidos, que ilumina las fotos y agrega un tinte amarillo, dando a las imágenes una estética retro kitsch. Juno y Ludwig aumentan las exposición. Y los filtros Moon, Willow e Inkwell desataran las fotos para mostrarlas en escala de grises.
Cómo añadir filtros de Instagram en las fotos de tu web con CSS
Si ya conoces todos los filtros probablemente te encante la idea de poder aplicarlos directamente a las fotos de tu web. Puede que ya lo hicieras imitándolos con Photoshop, o que incluso utilizaras Instagram antes de subirlas. Ahora solo necesitas añadir una hoja de estilos a tu web.
Instagram.css
Instagram.css es una hoja de estilo CSS que te permite aplicar los filtros de instagram simplemente cambiando la clase en una etiqueta div o figure.
El proyecto contiene todos los filtros de Instagram y funciona en casi todos los navegadores web modernos. Y como está escrito en CSS puro, funcionan incluso cuando el navegador web del usuario ejecuta NoScript.
En la imagen tienes un ejemplo de la aplicación de instagram.css en una web.
CSSGram
Otra hoja de estos con la que puedes añadir filtros de Instagram a tu web y pcon la que uedes lograr el mismo resultado es CSSGram.
También puedes ver un ejemplo de todos los filtros aquí.
Otras formas de añadir filtros de Instagram a tu web
La funcionalidad es muy popular por lo que no son las únicas hojas de estilo creadas para este fin. También hay otros proyectos como Filterous 2 que lo hace a trasés de JavaScript. Y si eres usuario Android puedes probar añadir a tus creaciones filtros Sepia mediante Sharaku o Insta-Filter.
¿Qué te parece poder añadir éstos filtros a las fotos de tu web? ¿Crees que podrás sacarle partido?
Te interesa: