CSSGram is an Instagram filter library written in Sass and CSS.
What is This?
Simply put, CSSgram is a library for editing your images with Instagram-like filters directly using CSS. What we're doing is adding filters to the images, as well as applying color and/or gradient overlays via various blending techniques to mimic filter effects. This means less manual image processing and more fun filter effects on the web!
We're 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:
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">. We're also on CDNJS which means another option is <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/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 --><figureclass="aden"><imgsrc="../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 using only one of the styles.
Available Classes
For use in HTML markup:
1977: class="_1977"
Aden: class="aden"
Amaro: class="amaro"
Brannan: class="brannan"
Brooklyn: class="brooklyn"
Clarendon: class="clarendon"
Gingham: class="gingham"
Hudson: class="hudson"
Inkwell: class="inkwell"
Kelvin: class="kelvin"
Lark: class="lark"
Lo-fi: class="lofi"
Mayfair: class="mayfair"
Moon: class="moon"
Nashville: class="nashville"
Perpetua: class="perpetua"
Reyes: class="reyes"
Rise: class="rise"
Slumber: class="slumber"
Stinson: class="stinson"
Toaster: class="toaster"
Valencia: class="valencia"
Walden: class="walden"
Willow: class="willow"
X-Pro-2: class="xpro2"
Use Sass @extend or @mixin
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
请发表评论