脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

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

极客头条   发布时间：2016-04-01 10:46:10   作者：FedFun   我要评论
这篇文章主要介绍了使用CSSgram来实现类似Instagram上的简单的滤镜效果的方法,CSSgram是一个CSS的滤镜第三方库,源码也十分简单,可以借鉴用来作二次开发,需要的朋友可以参考下

CSS滤镜（CSS filter）不少前端人员知道，但大多数的用法十分单一，用得最多的就是黑白应用，其实还有很多高级的应用，对设计师来说也需要知道的，以后对图片特效处理又多一种设计方案选择了。
201641104901395.jpg (500×346)

今天主要和大家介绍 CSSgram 这个CSS滤镜特效库，作者为其创建出很多美丽的图像效果，并且这个CSS滤镜库是小于1KB，效果的实现方法主要使用 CSS filter 和 CSS Blen Mode（混合模式）来实现。
201641104933229.jpg (500×309)

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

2. 兼容性
本库主要基于 CSS Filters和 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
下载CSSgram库。
在你的项目中链接该库。

XML/HTML Code复制内容到剪贴板
  1. <link rel="stylesheet" href="css/vendor/cssgram.min.css">  

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

XML/HTML Code复制内容到剪贴板
  1. <figure class="aden">  
  2.    <img src="../img.png">  
  3. </figure>  

可用的滤镜类
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文件，导入你的项目，然后使用继承了。

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

CSS Code复制内容到剪贴板
  1. <figure class="viz--beautiful">   
  2.   <img src="../img.png">   
  3. </figure>   
  4. // Sass   
  5. .viz--beautiful {   
  6.   @extend %aden;   
  7. }  

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

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

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

CSS Code复制内容到剪贴板
  1. /*  
  2.  *  
  3.  * Aden，aden.scss  
  4.  *  
  5.  */  
  6.   
  7. @import 'shared';   
  8.   
  9. %aden,   
  10. .aden {   
  11.   @extend %filter-base;   
  12.   filter: hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);   
  13.   
  14.   &:after{   
  15.     background: linear-gradient(to rightright, rgba(66, 10, 14, 0.2), transparent);   
  16.     mix-blend-mode: darken;   
  17.   }   
  18. }  

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

CSS Code复制内容到剪贴板
  1. %filter-base {   
  2.   position: relative;   
  3.   
  4.   &:after {   
  5.     content: '';   
  6.     display: block;   
  7.     height: 100%;   
  8.     width: 100%;   
  9.     top: 0; left: 0;   
  10.     position: absolute;   
  11.   }   
  12. }  

PS：截止目前的滤镜效果一览
201641105242901.jpg (500×1357)

相关文章

  • HTML5+CSS3实现的图片多种滤镜特效源码

    这是一款基于HTML5和CSS3的图片滤镜特效应用，每一张图片应用不同的滤镜效果都会有不一样的视觉特效。另外，你也可以切换图片，特别是应用在相册应用中，你不仅可以浏览不
    2015-12-10

  • 使用CSS3配合IE滤镜实现渐变和投影的效果

    这篇文章主要介绍了使用CSS3配合IE滤镜实现渐变和投影的效果的一些方法,尽管IE即将退出历史舞台,但也可以为EDGE浏览器的相关开发积累经验,需要的朋友可以参考下
    2015-09-06

  • CSS滤镜实现的颜色渐变翻转效果

    这篇文章主要为大家介绍了利用CSS中的滤镜效果实现渐变翻转效果的代码，不会的朋友可以和脚本之家的小编一起学习一下，以后想要实现渐变翻转效果就不难啦
    2014-10-09

  • css 滤镜效果主要对HTML标记设置滤镜效果

    CSS样式的filter（滤镜效果）对HTML的一些标记设置滤镜效果，下面主要为大家介绍下IE4.0以上支持的滤镜属性表及一些常用滤镜效果
    2014-09-06

  • CSS中filter滤镜的学习笔记(静态滤镜及动态滤镜)

    本节为大家介绍了CSS中filter滤镜，包括静态滤镜及动态滤镜的使用方法，不了解的朋友可以参考下
    2014-08-08

  • HTML5+CSS3实现的鼠标滑过图片滤镜动画特效源码

    这是一款用HTML5和CSS3实现的图片特效源码，当鼠标滑过图片时，即会出现很不错的图片动画特效，主要有淡入淡出、放大缩小、百叶窗遮罩等HTML5特效
    2014-07-14

  • jQuery与CSS3实现相册图片滤镜效果浏览插件源码

    这是一款基于jQuery和CSS3实现的超酷相册浏览插件，在鼠标滑过相册图片的缩略图时，图片即会产生滤镜效果，颜色由灰色变成彩色，同时图片的周围也会产生不错的阴影效果。在
    2014-06-17

  • 滤镜使用之图片透明的css写法

    图片透明在某些特殊的情况下还是比较实用的，下面是用滤镜写的图片透明代码，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-04

  • css滤镜兼容浏览器测试实例

    css滤镜想必大家早有所耳闻同时兼容浏览器这一块做得并不是很完美，所以本文的出现是很有必要的了，感兴趣的你可以参考下本文的测试实例，或许对你学习css滤镜有所帮助
    2013-03-17

  • IE滤镜与CSS3效果(详细整理分享)

    最近的项目都会接触CSS3，万恶的IE却不支持，搜索了一下，发现IE的滤镜挺管用，貌似W3C正在把滤镜标准化,抽时间整理了一下IE的滤镜效果记住请用IE浏览哦,感兴趣的朋友可以
    2013-01-25

最新评论

关注微信公众号

扫一扫