一个支持Instagram 滤镜库的 Sass/CSS框架
图片演示
DEMO2
Cssgram 是一个使用CSS给图片加上类似Instagram的滤镜库。我们所做的就是通过改变各种各样的 混合模式 颜色或者渐变所产生的效果运用到图片上。这也就意味着减少更少的图片处理，以及提供更多的有趣的效果。
我们使用伪类(i.e, ::before and ::after )创建滤镜效果，这样你必须在img 外面包裹一层标签，我们建议你使用 figure 标签进行去包裹你的图片。
使用 class 你可以轻松给你的图片添加各式各样的滤镜
1 使用css 外链
<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">
*你也可直接下载压缩的 CSS文件 。
然后本地引用:
`
`
然后在你的元素添加class即可生效
案例:
<!-- HTML --><figure class="aden"> <img src="../img.png" alt="用Css给你的图片加上Instagram滤镜_html/css_WEB-ITnose" ></figure>
接着，引入外部样式(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"
*
如果你希望自定义你的css命名，你可以把 .scss 文件引入到你的项目中来 。然后你可以使用 @extend 在你希望定义的样式中去使用这些滤镜。
下载 scss/ 目录内容
*使用 @import 将文件 scss/cssgram.scss 引入到你的主文件中来 (i.e. main.scss ).
@import 'vendor/cssgram';
*在需要的样式上进行扩展 (e.g. @extend %aden or 使用 mixins @include aden() )。
比如:
<!-- HTML --><figure class="viz--beautiful"> <img src="../img.png" alt="用Css给你的图片加上Instagram滤镜_html/css_WEB-ITnose" ></figure>// 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中使用
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
