用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"
-
*lyn: class="*lyn"
-
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
-
*lyn: @extend %*lyn
-
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()
-
*lyn: @include *lyn()
-
Nashville: @include nashville()
-
Lark: @include lark()
-
Moon: @include moon()
-
Clarendon: @include clarendon()
-
Willow: @include willow()
更多阅读: https://github.com/JackPu/CSSgram
下一篇: php 二维数组的键如何改成数字?
推荐阅读
-
关于用图片做无序列表的项目符号,我做出来怎么是这个样子?_html/css_WEB-ITnose
-
用Css给你的图片加上Instagram滤镜_html/css_WEB-ITnose
-
用CSS3实现带小三角形的div框(不用图片)_html/css_WEB-ITnose
-
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的_html/css_WEB-ITnose
-
超链接文字的 右边有个图片,是用css弄在一起的吗?_html/css_WEB-ITnose
-
关于用图片做无序列表的项目符号,我做出来怎么是这个样子?_html/css_WEB-ITnose
-
没有找到的图片,可以用什么方法,统一同其他图片来替换_html/css_WEB-ITnose
-
背景图片logo用IE能复制出来,就是找不到背景logo的url地址_html/css_WEB-ITnose
-
用background:url图片做背景重复的,图片之间会有间隔,怎么解决?_html/css_WEB-ITnose
-
新手 问个比较弱智的问题 我用img标签插入图片显示不出来时怎么回事?_html/css_WEB-ITnose