使用CSSgram来实现类似Instagram上的简单的滤镜效果

CSS Code复制内容到剪贴板

<figure class="viz–beautiful">   
  <img src="../img.png">   
</figure>   
// Sass   
.viz–beautiful {   
  @extend %aden;   
}  

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

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

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

CSS Code复制内容到剪贴板

/*  
 *  
 * 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 rightright, rgba(66, 10, 14, 0.2), transparent);   
    mix-blend-mode: darken;   
  }   
}  

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

CSS Code复制内容到剪贴板

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

PS：截止目前的滤镜效果一览