用Css给你的图片加上Instagram滤镜_html/css_WEB-ITnose

CSSgram

一个支持Instagram 滤镜库的 Sass/CSS框架

图片演示

DEMO2

这是什么

Cssgram 是一个使用CSS给图片加上类似Instagram的滤镜库。我们所做的就是通过改变各种各样的 混合模式 颜色或者渐变所产生的效果运用到图片上。这也就意味着减少更少的图片处理,以及提供更多的有趣的效果。

我们使用伪类(i.e, ::before and ::after )创建滤镜效果,这样你必须在img 外面包裹一层标签,我们建议你使用 figure 标签进行去包裹你的图片。

如何使用

你可以使用下面两种方法来使用CSSgram:

使用 CSS Class

使用 class 你可以轻松给你的图片添加各式各样的滤镜

1 使用css 外链

*你也可直接下载压缩的 CSS文件 。

然后本地引用:

`

`

然后在你的元素添加class即可生效

案例:

接着,引入外部样式(e.g. )

目前提供的滤镜

你可以在html中直接使用:

  • 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"

  • Nashville: class="nashville"

  • Lark: class="lark"

  • Moon: class="moon"

  • Clarendon: class="clarendon"

  • Willow: class="willow"

    • *

使用Sass @extend or @mixin

如果你希望自定义你的css命名,你可以把 .scss 文件引入到你的项目中来 。然后你可以使用 @extend 在你希望定义的样式中去使用这些滤镜。

  1. 下载 scss/ 目录内容

    *使用 @import 将文件 scss/cssgram.scss 引入到你的主文件中来 (i.e. main.scss ).

@import 'vendor/cssgram';

*在需要的样式上进行扩展 (e.g. @extend %aden or 使用 mixins @include aden() )。

比如:

// Sass.viz--beautiful { @extend %aden;}

或者使用 mixins (更加方便)

// Sass (without adding new CSS3 filters).viz--beautiful {  @include aden();}// Sass (adding new CSS3 filters).viz--beautiful {  @include aden(blur(2px) /*...*/);}

当然,如果你只用到了某一个效果,这样你也只需要引入对应 scss 文件即可( scss/aden.scss )。

目前可用的效果

在Scss中使用

Extends

  • Aden: @extend %aden

  • Reyes: @extend %reyes

  • Perpetua: @extend %perpetua

  • Inkwell: @extend %inkwell

  • Toaster: @extend %toaster

  • Walden: @extend %walden

  • Hudson: @extend %hudson

  • Gingham: @extend %gingham

  • Mayfair: @extend %mayfair

  • Lo-fi: @extend %lofi

  • X-Pro II: @extend %xpro2

  • 1977: @extend %_1977

  • Brooklyn: @extend %brooklyn

  • Nashville: @extend %nashville

  • Lark: @extend %lark

  • Moon: @extend %moon

  • Clarendon: @extend %clarendon

  • Willow: @extend %willow

Mixins(你可以加入更多的css3滤镜进来)

  • Aden: @include aden()

  • Reyes: @include reyes()

  • Perpetua: @include perpetua()

  • Inkwell: @include inkwell()

  • Toaster: @include toaster()

  • Walden: @include walden()

  • Hudson: @include hudson()

  • Gingham: @include gingham()

  • Mayfair: @include mayfair()

  • Lo-fi: @include lofi()

  • X-Pro II: @include xpro2()

  • 1977: @include _1977()

  • Brooklyn: @include brooklyn()

  • Nashville: @include nashville()

  • Lark: @include lark()

  • Moon: @include moon()

  • Clarendon: @include clarendon()

  • Willow: @include willow()

更多阅读: https://github.com/JackPu/CSSgram