在Sass和CSS中的Instagram滤镜库:CSSgram_html/css_WEB-ITnose
程序员文章站
2022-04-16 17:08:13
...
简单地说,CSSgram是一个库能够直接在CSS中利用类似Instagram的滤镜来编辑您的照片。通过在图片上叠加颜色或渐变模拟实现滤镜,可以节省大量的图片处理时间,增加线上“玩弄”图片的乐趣。 下载CSSgram库。 在你的项目中链接该库。
在你的图片元素上添加滤镜名字的Classes(因为本库使用伪类选择符实现滤镜效果,所以滤镜类需要添加到容器元素上,不能是img,最好是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"
*lyn:class="*lyn"
1. 兼容性
本库主要基于 CSS Filters和 CSS Blend Modes,浏览器兼容性也主要依赖于这两个特性。
Google Chrome: 43+
Mozilla Firefox: 38+
Opera: 32+
Safari: 8+
Internet Explorer: Nope
更多兼容性信息参见Can I Use。
2.使用
有两种主要的方式使用该库,使用CSS Classes和使用SASS @extends。
3.1 使用CSS Classes
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"
*lyn:class="*lyn"
项目主页:http://www.open-open.com/lib/view/home/1446038847710
上一篇: flush()函数无效?不能实时刷新输出,怎么解决呢
下一篇: JQuery打造无缝滚动新闻步骤详解