CSSGram (original) (raw)

CSSgram

A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.

Hovering over any of these images (or clicking on mobile) will remove the filter effect to visualize the changes.

What is This?

For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!

We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to wrap your images in a <figure> tag. More about the tag here.

Browser Support

This library uses CSS Filters and CSS Blend Modes. These features are supported in the following browsers:

For more information, check on Can I Use.

Usage

There are currently 3 ways to consume this library:

1. Use CSS classes

When using CSS classes, you can simply add the class with the filter name to the element containing your image.

The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"> (OR you can now use CDNJS with <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css"> ). Then, add a class to your figure element with the name of the filter you would like to use (shown below)

If you want to work locally, do the following:

  1. Download the CSSgram Library
  2. Link to the CSSgram library within your project:
    <link rel="stylesheet" href="css/vendor/cssgram.min.css">
  3. Add a class to your figure element with the name of the filter you would like to use

For example:


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

Alternatively, you can just download and link to any individual css file:
<link rel="stylesheet" href="css/vendor/aden.min.css">, if you're just using one of the styles.

Available Classes

For use in HTML markup:

2. Use Sass @extends

If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.

  1. Download the /scss folder contents
  2. Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
  3. Extend the silent placeholder selector @extend %aden; in your element.

For example:


      <!-- HTML -->
      <figure class="viz--beautiful">
        <img src="../img.png">
      </figure>
    

      // Sass
      .viz--beautiful {
        @extend %aden;
      }

Alternatively, you can just download and link any individual .scss file in your Sass manifest:
(i.e. scss/aden.scss), if you're just using one of the styles.

Available Extends

For use in Sass elements:

3. Use Sass @mixins

Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).

  1. Download the /scss folder contents
  2. Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
  3. Include the mixin @include aden() in your element.

For example:


      <!-- HTML -->
      <figure class="viz--beautiful">
        <img src="../img.png">
      </figure>
    

      // Sass
      .viz--beautiful {
        @include aden()
      }

As mentioned above, you can also add additional filters as arguments when using the library with mixins:


      // Sass
      .viz--beautiful {
        @include @include aden(blur(2px) /*...*/);
      }

Available Mixins

For use in Sass elements: