CSSgram-使用CSS Filters和CSS Blend Modes实现Instagram风格滤镜

1. 简介

CSSgram是一个简单易用的CSS库，组合CSS Filter和CSS Blend Modes实现的Instagram风格的图片滤镜，通过在图片上叠加颜色或渐变模拟实现滤镜，可以节省大量的图片处理时间，增加线上“玩弄”图片的乐趣。

2. 兼容性

本库主要基于 CSS Filters and CSS Blend Modes，浏览器兼容性也主要依赖于这两个特性。

Google Chrome: 43+

Mozilla Firefox: 38+

Opera: 32+

Safari: 8+

Internet Explorer: Nope

更多兼容性信息参见Can I Use。

3.使用

有两种主要的方式使用该库，使用CSS Classes和使用SASS @extends。

3.1 使用CSS Classes

1. 下载CSSgram库。
2. 在你的项目中链接该库。

   <link rel="stylesheet" href="css/vendor/cssgram.min.css">

3. 在你的图片元素上添加滤镜名字的Classes（因为本库使用伪类选择符实现滤镜效果，所以滤镜类需要添加到容器元素上，不能是img，最好是figure标签）。

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

1. 可用的滤镜类

   CSSgram提供的滤镜类有：

   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"

3.2 使用SASS @extends。

如果你在使用SASS，那么你可以下载本库的scss文件，导入你的项目，然后使用继承了。

1. 下载scss形式的库
2. 在你的主要scss文件中导入本库，貌似这样@import ‘vendor/cssgram‘;
3. 在你需要应用滤镜的选择器中使用继承，例如@extend %aden

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

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

当然，如果你只使用其中一种效果，可以仅仅下载和导入其中一种（例如scss/aden.scss）。

最后附上本库的github托管地址https://github.com/una/CSSgram，希望可以对大家有所帮助。

4. 声明

爱前端乐分享的FedFun，csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！

欢迎任何形式的转载，烦请注明装载，保留本段文字。

本文原文链接http://blog.csdn.net/whqet/article/details/49423605

独立博客http://whqet.github.io

新浪微博http://weibo.com/FedFun

极客头条http://geek.csdn.net/user/publishlist/whqet

版权声明：本文为博主原创文章，未经博主允许不得转载。