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!
El diseño gráfico es un género propio y tiene sus propias normas, convenciones y tendencias. Al igual que el diseño web, el diseño gráfico también evoluciona con el tiempo y nunca es estático o rígido. Dicho esto, el diseño gráfico se trata…
En el mundo no faltan las buenas causas y las personas que las defienden. Algunas de estas causas son muy destacadas, prácticamente omnipresentes, mientras que a otras les vendría bien un poco más de publicidad. Ahora tienes la oportunidad de apoyar una…
Cómo programar publicaciones de Instagram El proceso para automatizar las publicaciones de Instagram solía requerir el uso de una aplicación o servicio de programación de Instagram que aún necesitaba que publicara manualmente sus fotos o videos. Afortunadamente, ese ya no es el…
Ommmm. No te preocupes; esta herramienta no es esotérica. Si le muestra sus imágenes, le indica la ubicación respectiva de su centro visual. Esto permite presentaciones más armoniosas. Javier Bórquez de Guadalajara, México, es un desarrollador de software aficionado al diseño. Se…
La forma en que se desarrollan y se visitan los sitios web cambió drásticamente en los últimos años. El uso de dispositivos móviles está creciendo y tecnologías como HTML5 y CSS3 hacen posibles cosas que antes eran imposibles o difíciles de lograr….
Si bien puede usar HTML5 y CSS3 en navegadores modernos sin ningún problema, y suponer que Chrome, Firefox e Internet Explore o Edge muestran todo de la manera que espera, los servicios de correo electrónico son una historia diferente. Cada programa tiene…