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.
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.
There are currently 3 ways to consume this library:
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:
<link rel="stylesheet" href="css/vendor/cssgram.min.css">For example:
<!-- HTML -->
<figure class="aden">
<img src="../img.png">
</figure>
<link rel="stylesheet" href="css/vendor/aden.min.css">, if you're just using one of the styles.
class="_1977"class="aden"class="brannan"class="brooklyn"class="clarendon"class="earlybird"class="gingham"class="hudson"class="inkwell"class="kelvin"class="lark"class="lofi"class="maven"class="mayfair"class="moon"class="nashville"class="perpetua"class="reyes"class="rise"class="slumber"class="stinson"class="toaster"class="valencia"class="walden"class="willow"class="xpro2"@extendsIf 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 😊.
scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';@extend %aden; in your element.For example:
<!-- HTML -->
<figure class="viz--beautiful">
<img src="../img.png">
</figure>
// Sass
.viz--beautiful {
@extend %aden;
}
scss/aden.scss), if you're just using one of the styles.
@extend %_1977;@extend %aden;@extend %brannan;@extend %brooklyn;@extend %clarendon;@extend %earlybird;@extend %gingham;@extend %hudson;@extend %inkwell;@extend %kelvin;@extend %lark;@extend %lofi;@extend %maven;@extend %mayfair;@extend %moon;@extend %nashville;@extend %perpetua;@extend %reyes;@extend %rise;@extend %slumber;@extend %stinson;@extend %toaster;@extend %valencia;@extend %walden;@extend %willow;@extend %xpro2;@mixinsMixins 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).
scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';@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) /*...*/);
}
@include _1977();@include aden();@include brannan();@include brooklyn();@include clarendon();@include earlybird();@include gingham();@include hudson();@include inkwell();@include kelvin();@include lark();@include lofi();@include maven();@include mayfair();@include moon();@include nashville();@include perpetua();@include reyes();@include rise();@include slumber();@include stinson();@include toaster();@include valencia();@include walden();@include willow();@include xpro2();