html 图片 滤镜,用Css给你的图片加上Instagram滤镜
CSSgram
一个支持Instagram 滤镜库的 Sass/CSS框架
这是什么
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()
html 图片 滤镜,用Css给你的图片加上Instagram滤镜相关推荐
- html 怎么自动让图片居中显示,css中怎样让图片居中显示?
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来 ...
- html怎么加背景图片不重复,css怎么设置背景图片不重复?
在使用css添加背景图片时,默认的样式是图片重复:但有时页面只需要一个不重复的大背景图片,那么如何让背景图片不重复?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,可以使用backg ...
- css:css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度 注意: css中无法直接给背景图片加 opacity 属性,可以使用下面的方法来给background-image加上我们想要的透明度opacity. 2. ...
- html图片显示变形,CSS完美解决前端图片变形问题的方法
在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一.让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: div{ width: 200px; height: ...
- html5怎么让图片垂直居中显示,css中如何实现图片垂直居中显示?
css中如何实现图片垂直居中显示?下面本篇文章就来给大家介绍一下使用CSS实现图片垂直居中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 一.使用flex实现图片垂直居中 利 ...
- php怎么设置文字环绕图片,CSS_CSS实现文字环绕图片效果,CSS实现文字环绕图片效果
文 - phpStudy...
CSS实现文字环绕图片效果 CSS实现文字环绕图片效果 文字环绕图片,在Word里只要click一下右键,调一下属性就可以了.但在HTML文档里就没有直接属性了.因此我们可以借助CSS来实现这一效果. ...
- jq加css制作图片切换,jQuery+css实现的切换图片功能代码
本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo body { margin:0; padding:0; } . ...
- html怎么使图片自动填充,CSS怎么将img图片填满父容器div自适应容器大小
CSS怎么将img图片填满父容器div自适应容器大小 发布时间:2021-03-19 09:35:26 来源:亿速云 阅读:114 作者:小新 这篇文章将为大家详细讲解有关CSS怎么将img图片填满父 ...
- html背景图片纵向缩小,css怎么把背景图片缩小?
在CSS中,想要缩小背景图片,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性,希望对大家有所帮助. background-s ...
- html图片缩放作为背景,css怎么把背景图片缩小?
在CSS中,想要缩小背景图片,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性,希望对大家有所帮助. background-s ...
最新文章
- 【视频课】模型剪枝+模型量化+知识蒸馏典型实践!
- linux的HAL库函数,STM32 HAL库 IIC 协议库函数
- 【精心总结】java内存模型和多线程必会知识
- TensorFlow 是一个用于人工智能的开源神器
- ReportViewer 安装
- 华为机试HJ28:素数伴侣
- python怎么读-Python中怎么读写文件
- 如何建立数学模型系列之【一.通俗解释及相关概念】
- 茆诗松等《高等数理统计(第二版)》例 1.28 的错误及改正
- 关于win10 64位安装 XP 32位注意事项
- UG NX重用库汉化版本
- Nginx 的配置文件
- 工作流现状2008年
- PHP混淆zym解密
- CF1647F Madoka and Laziness
- C语言(二)— 整型
- 防火墙设计和部署解析
- php mysql utf 8_PHP+MySQL中对UTF-8,UTF8(utf8),set names gbk 的理解
- Linux上安装Nginx教程
- jquery拼接html
热门文章
- 要些一个在win98下的socket服务程序,大家推荐一下用啥控件?Indy?
- openpyxl 2.5.0中文文档
- Spring整合JavaMail
- SharePoint 2013 同步FBA认证用户
- C# 开发 OPC Server 系列之二
- 两天来的Java IO Tips
- 深入浅出插入类排序算法(直接插入, 折半插入, 希尔排序)
- java的字符串的加密_Java加密解密字符串
- 拓端tecdat|R语言模拟和预测ARIMA模型、随机游走模型RW时间序列趋势可视化
- (8)matplotlib 将点连成线