Merida Design Blog

Publicado el | Recursos /

CSSGram: Filtros como los de Intragram con CSS

CSSGram es una pequeña librería que nos ayuda a recrear los efectos de Instagram usando solamente CSS con filters effects y blend modes.

La librería crea estos efectos usando los pseudo-elementos :before y :after por lo que los filtros se deben asignar a los elementos que contienen a la imagen y no directamente al elemento img.


Soporte

Actualmente los filter effects y blend modes son soportados en la mayoría de los navegadores modernos, con la excepción de Internet Explorer (que raro).

Puedes consultar las tablas de compatibilidad en los siquientes enlaces:
Can I use: CSS filter effects
Can I use: CSS blend modes


Modo de uso

Incluye la librería en el head

    <head>
        ...
        <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

Luego solamente necesitas asignar la clase con el filtro que quieres aplicar al elemento que contiene la imagen.

    <figure class="aden">
        <img src="../img.png">
    </figure>


Filtros disponibles

  • 1977: class="_1977"
  • aden: class="aden"
  • Brooklyn: class="brooklyn"
  • Clarendon: class="clarendon"
  • Earlybird: class="earlybird"
  • Gingham: class="gingham"
  • Hudson: class="hudson"
  • Inkwell: class="inkwell"
  • Lark: class="lark"
  • Lo-Fi: class="lofi"
  • Mayfair: class="mayfair"
  • Moon: class="moon"
  • Nashville: class="nashville"
  • Perpetua: class="perpetua"
  • Reyes: class="reyes"
  • Toaster: class="toaster"
  • Walden: class="walden"
  • Willow: class="willow"
  • X-pro II: class="xpro2"

Página: http://una.im/CSSgram



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: