用Css给你的图片加上Instagram滤镜

Flands 发布于2019-08-19 18:07 / 1445人阅读

摘要：一个支持滤镜库的框架图片演示这是什么是一个使用给图片加上类似的滤镜库。如何使用你可以使用下面两种方法来使用使用使用你可以轻松给你的图片添加各式各样的滤镜使用外链你也可直接下载压缩的文件。然后你可以使用在你希望定义的样式中去使用这些滤镜。

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在你希望定义的样式中去使用这些滤镜。

下载 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

混合云云服务器巧用CSS的MASK滤镜图片滤镜给你个图片css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79213.html

12个令人惊叹的CSS实验项目

摘要：看看这些惊人的纯实验，也许你自己也可以尝试一下。项目链接叠叠高游戏你可以不用来编写一个游戏。这个纯粹用实现的叠叠高游戏看上去很简单，但是很有趣，而且图形也很漂亮。项目链接鬼影渐变效果按钮令人惊讶的是它是只用编写的。翻译：疯狂的技术宅原文：https://1stwebdesigner.com/12... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜...

LiuZh 2019-08-30 15:55 评论0 收藏0
12个令人惊叹的CSS实验项目

摘要：看看这些惊人的纯实验，也许你自己也可以尝试一下。项目链接叠叠高游戏你可以不用来编写一个游戏。这个纯粹用实现的叠叠高游戏看上去很简单，但是很有趣，而且图形也很漂亮。项目链接鬼影渐变效果按钮令人惊讶的是它是只用编写的。翻译：疯狂的技术宅原文：https://1stwebdesigner.com/12... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜...

wow_worktile 2019-08-02 14:11 评论0 收藏0
12个令人惊叹的CSS实验项目

摘要：看看这些惊人的纯实验，也许你自己也可以尝试一下。项目链接叠叠高游戏你可以不用来编写一个游戏。这个纯粹用实现的叠叠高游戏看上去很简单，但是很有趣，而且图形也很漂亮。项目链接鬼影渐变效果按钮令人惊讶的是它是只用编写的。翻译：疯狂的技术宅原文：https://1stwebdesigner.com/12... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜...

CastlePeaK 2019-08-26 13:30 评论0 收藏0