欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

在Sass和CSS中的Instagram滤镜库:CSSgram_html/css_WEB-ITnose

程序员文章站 2022-03-19 13:24:52
...
简单地说,CSSgram是一个库能够直接在CSS中利用类似Instagram的滤镜来编辑您的照片。通过在图片上叠加颜色或渐变模拟实现滤镜,可以节省大量的图片处理时间,增加线上“玩弄”图片的乐趣。

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库。
  • 在你的项目中链接该库。
  • 在你的图片元素上添加滤镜名字的Classes(因为本库使用伪类选择符实现滤镜效果,所以滤镜类需要添加到容器元素上,不能是img,最好是figure标签)。
  • 在Sass和CSS中的Instagram滤镜库:CSSgram_html/css_WEB-ITnose
  • 可用的滤镜类
    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