CSSgram
Instagram filter library in Sass and CSS.
What is This?
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 replaced element 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:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 43+ |
38+ |
Nope ✘ | 32+ |
8+ |
For more information, check on Can I Use.
Usage
There are currently 2 ways to consume this library:
Use CSS classes
When using CSS classes, you can simply add the class with the filter name to the element containing your image.
- Include the CDN link in your
<head>tag:<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">
- Alternatively, you can download the CSSgram library locally and link to the it within your project:
<link rel="stylesheet" href="css/vendor/cssgram.min.css"> - Add a class to your image 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 (e.g. <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:
- Aden:
class="aden" - Reyes:
class="reyes" - Perpetua:
class="perpetua" - Inkwell:
class="inkwell" - Toaster:
class="toaster" - Walden:
class="walden" - Hudson:
class="hudson" - Gingham:
class="gingham" - Mayfair:
class="mayfair" - Lo-fi:
class="lofi" - X-Pro II:
class="xpro2" - 1977:
class="_1977" - Brooklyn:
class="brooklyn" - Nashville:
class="nashville" - Lark:
class="lark" - Moon:
class="moon"
Use Sass @extend
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
- Include a link to
scss/cssgram.scssvia an@importstatement in your Sass manifest file (i.e.main.scss). It may look like:@import 'vendor/cssgram' - Extend the placeholder selector (e.g.
@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 Placeholders
For use in Sass stylesheets:
- Aden:
@extend %aden - Reyes:
@extend %reyes - Perpetua:
@extend %perpetua - Inkwell:
@extend %inkwell - Toaster:
@extend %toaster - Walden:
@extend %walden - Hudson:
@extend %hudson - Gingham:
@extend %gingham - Mayfair:
@extend %mayfair - Lo-fi:
@extend %lofi - X-Pro II:
@extend %xpro2 - 1977:
@extend %_1977 - Brooklyn:
@extend %brooklyn - Nashville:
@extend %nashville - Lark:
@extend %lark - Moon:
@extend %moon
Contributing
Either:
- Create an issue
Or:
- Fork this repository
- Clone the fork onto your system
npm installdependencies (must have Node installed)- Run
gulpto compile CSS and the test site - Make changes and check the test site with your changes (see file structure outline below)
- Submit a PR referencing the issue with a smile
😄
If you’d like to contribute, the following filters are yet to be added:
- Amaro
- Ashby
- Brannan
- Charmes
- Clarendon
- Crema
- Dogpatch
- Ginza
- Hefe
- Helena
- Juno
- Kelvin
- Ludwig
- Maven
- Rise
- Sierra
- Skyline
- Slumber
- Stinsen
- Sutro
- Valencia
- Vesper
- Willow
Filters are really fun to create! Reference photos created by Miles Croxford can be found here.
File Structure Outline
source/css/cssgram.csscontains each of the CSS classes you can apply to your<img>to give it the filter. You should usesource/css/cssgram.min.cssfor production if you want access to all of the librarysource/scss/contains the source files for individual classes and placeholder selectors you can use to extend CSS classes in Sasssite/is the public facing websitesite/testis how you test filters if you're developing, remember to changeis_donefor the filter you're creating insite/test/index.twigwhilst gulp is running.
Note: this will also have mixin options and a PostCSS Component.