Instagram filter library in Sass and CSS.
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.
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.
There are currently 2 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.
- 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.
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"
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.scss
via an@import
statement 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.
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
Either:
- Create an issue
Or:
- Fork this repository
- Clone the fork onto your system
npm install
dependencies (must have Node installed)- Run
gulp
to 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:
Filters are really fun to create! Reference photos created by Miles Croxford can be found here.
source/css/cssgram.css
contains each of the CSS classes you can apply to your<img>
to give it the filter. You should usesource/css/cssgram.min.css
for 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/test
is how you test filters if you're developing, remember to changeis_done
for the filter you're creating insite/test/index.twig
whilst gulp is running.
Note: this will also have mixin options and a PostCSS Component.