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

末蓝、 2022-05-26 08:40 162阅读 0赞

![CSSgram][]  
![图片描述][20151026142127682]  
![图片描述][20151026142141404]  
![图片描述][20151026142155335]

## 1. 简介 ##

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

## 2. 兼容性 ##

本库主要基于 [CSS Filters][]和 [ CSS Blend Modes][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库][CSSgram 2]。
2.  在你的项目中链接该库。  
    `<link rel="stylesheet" href="css/vendor/cssgram.min.css">`
3.  在你的图片元素上添加滤镜名字的Classes（因为本库使用伪类选择符实现滤镜效果，所以滤镜类需要添加到容器元素上，不能是img，最好是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形式的库][scss]
2.  在你的主要scss文件中导入本库，貌似这样`@import 'vendor/cssgram';`
3.  在你需要应用滤镜的选择器中使用继承，例如`@extend %aden`

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

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

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

## 4. 源码解析 ##

下面简单分析CSSgram的源码，以Aden效果为例。

/* * * Aden，aden.scss * */
    
    @import 'shared';
    
    %aden,
    .aden {
      @extend %filter-base;
      filter: hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);
    
      &:after{
        background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
        mix-blend-mode: darken;
      }
    }

其中导入了shared，\_shared.scss源码如下。

%filter-base {
      position: relative;
    
      &:after {
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        top: 0; left: 0;
        position: absolute;
      }
    }

That’s all.

[CSSgram]: /images/20220526/bff6bc84b1064a4bad25339450a11d41.png
[20151026142127682]: /images/20220526/08d7f41963e64bbeabdd60596ff62579.png
[20151026142141404]: /images/20220526/92de39ac6db447f6869be682bf36f1b1.png
[20151026142155335]: /images/20220526/7615cfc8c3be484aaa2304aec44bece5.png
[CSSgram 1]: http://una.im/CSSgram/
[CSS Filters]: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
[CSS Blend Modes]: https://css-tricks.com/basics-css-blend-modes/
[Can I Use]: http://caniuse.com/
[CSSgram 2]: https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css
[scss]: https://github.com/una/CSSgram/tree/master/source/scss
[https_github.com_una_CSSgram]: https://github.com/una/CSSgram