DY点线面

  • 首页
  • blog
  • 设计导航
  • 下载
  • 吾爱淘
  • 关于
致力于设计干货分享
  1. 首页
  2. HTML5
  3. 正文

CSSgram:让CSS滤镜帮你实现漂亮的图像特效

2015年10月29日 1151点热度 0人点赞 0条评论

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

CSS FILTER

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

CSS FILTER

使用教程

STEP 1: 下载 CSSgram 样式库

下载地址:cssgram.min.css

STEP 2: 载入CSSgram样式库

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

STEP 3: 在图片上级元素添加对应特效的 Class.

<!-- HTML -->
<figure class="aden">
  <img src="../img.jpg">
</figure>

最后,如果你不想用所有效果,可以单独添加所需样式表,如:

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

滤镜效果一览

CSS FILTER

目 CSSgram 前开发者编写了14种图片特效,均以CSS filter 或结合 CSS Blend 实现,设计师可以选择自己喜欢的效果应用到项目上,这也是不错的选择。

网站名称:CSSgram
网站地址:http://una.im/CSSgram/
原文转自:设计达人
标签: CSS 滤镜
最后更新:2015年10月29日

D. Young

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

D. Young

这个人很懒,什么都没留下

文章目录
  • 使用教程
  • 滤镜效果一览

COPYRIGHT © 2022 dyartstyle.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

鲁ICP备15008799号-1