CSSgram: efectos de imagen de Instagram en CSS simple

CSSgram es una pequeña biblioteca de CSS que le permite aplicar 15 filtros que ya conoce de Instagram a cualquier imagen que desee. Si te gusta este tipo de modificación de imagen, puedes agarrarlo sin dudarlo. Usar efectos de imagen nítidos no puede ser más fácil que eso.

CSSgram: 1kb de potencia pequeña para sus imágenes

Una Kravets de Austin, Texas, es responsable de la potencia del efecto de imagen pequeña. CSSgrama se distribuye bajo la licencia liberal MIT, lo que significa que es gratuito para uso privado y comercial y se puede descargar en Github. La biblioteca CSS está en desarrollo activo, pero actualmente se está ralentizando debido a un pequeño ataque al repositorio. Sin embargo, esto solo afecta las perspectivas futuras. La biblioteca CSS tal como está funciona realmente bien y de manera confiable con su equipo actual de 15 filtros. Ya conoces los filtros proporcionados por Instagram. Si le gusta el aspecto antiguo de los filtros predeterminados de Instagram, CSSgram es el motor de filtro flexible para las imágenes de su sitio web. CSSgram usa filtros CSS y modos de fusión CSS, por lo que ya puedes imaginar que no funciona con todos los navegadores. Funciona perfectamente bien en Chrome a partir de 43, Firefox a partir de 38, Opera a partir de 32 y Safari a partir de 8. Se excluye Internet Explorer. Sin embargo, esto no es gran cosa, ya que el peor de los casos es que no se aplique un filtro a la imagen y la imagen se muestre en su estado original. En el sitio web del proyecto, puede ver los filtros en todo su esplendor y ver la diferencia entre el original y el filtro al instante al pasar el mouse sobre ellos. Estos son algunos de los efectos disponibles aplicados a una imagen de ejemplo:

CSSgram: es así de fácil aplicar un filtro

Incluso si no es un diseñador web sino un operador de sitio ambicioso, no tendrá ningún problema al usar CSSgram. Primero necesita integrar la biblioteca en su proyecto. Funciona así:

Eso es casi todo. Ahora todo lo que necesita hacer es equipar la imagen respectiva con una clase que define el filtro, así:

O más fácil:

Cuando desee restringirse a un solo efecto, puede usar una biblioteca CSS aún más pequeña que solo proporcione este efecto, por ejemplo:

CSSgram también ofrece otro sabor para aquellos que prefieren Sass. Aquí, los efectos se definen a través de @extends. La variante Sass también ofrece archivos individuales por efecto. Al final, no puedo presentar nada en contra del uso de CSSgram para efectos de imagen bonitos. Deje que Photoshop sea Photoshop y filtre un par de imágenes ordenadas. Esto es fácil, rápido y no destructivo. ¡Divertirse!

(dpe)