Heim > Web-Frontend > HTML-Tutorial > 在Sass和CSS中的Instagram滤镜库:CSSgram_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 09:04:43
Original
1602 Leute haben es durchsucht

简单地说,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标签)。
  • <figure class="aden"> <img  src="../img.png" alt="在Sass和CSS中的Instagram滤镜库:CSSgram_html/css_WEB-ITnose" > </figure>
    Nach dem Login kopieren
  • 可用的滤镜类
    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"
  • 项目主页:http://www.open-open.com/lib/view/home/1446038847710

    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage