html图片滤镜,纯CSS图片滤镜项目CSSgram简介
一、CSS滤镜库效果预览
以下效果均是使用纯CSS实现的。
您也可以选择本机图片感受下不同的滤镜处理效果:
二、CSSgram项目简介
CSSgram项目是借助CSS filter滤镜和mix-blend-mode混合模式实现Instagram这个产品中的26种滤镜效果。
使用方法
滤镜效果的实现非常简单,如下3步:
引入css库资源:
写好HTML结构,元素外部弄一层父级标签,例如使用语义更好的
在
完整的类名列表如下:
1977: class="_1977"
Aden: class="aden"
Amaro: class="amaro"
Brannan: class="brannan"
Brooklyn: class="brooklyn"
Clarendon: class="clarendon"
Gingham: class="gingham"
Hudson: class="hudson"
Inkwell: class="inkwell"
Kelvin: class="kelvin"
Lark: class="lark"
Lo-fi: class="lofi"
Mayfair: class="mayfair"
Moon: class="moon"
Nashville: class="nashville"
Perpetua: class="perpetua"
Reyes: class="reyes"
Rise: class="rise"
Slumber: class="slumber"
Stinson: class="stinson"
Toaster: class="toaster"
Valencia: class="valencia"
Walden: class="walden"
Willow: class="willow"
X-Pro-2: class="xpro2"
兼容性
CSS滤镜和混合模式的兼容性其实还是很不错的,除了IE浏览器不支持其他浏览器都可以放心使用。
43+ ✔
38+ ✔
Nope ✘
13 ✔
32+ ✔
8+ ✔
三、滤镜处理图片的合成与存储
虽然视觉上滤镜效果已经有了,但是如果用户希望保存图片到本地,或者直接合成后的图片生成,则还需要做额外的处理,因为此时右键保存的图片还是原始图片。
通常有两种实现方法:
一种是后端截图,还有一种是前端截图。
后端截图是自己搭建一个服务,把对应的HTML和css传过去,然后返回截图,支持PNG透明。
前端截图可以使用一些截图框架,如html2canvas,或者直接自己手动处理,使用SVG foreignObject元素。
使用demo页面提供的cssRenderImage2PureImage(dom, callback)方法可以轻松实现想要的效果,同时支持retina屏幕下的效果合成。
四、CSSgram也可以用在视频上
CSSgram这种一个类名改变图像呈现效果的库不仅可以作用在图片元素上,对于HTML5 video视频同样受用。
例如,我们打开B站任意视频页面,打开控制台,粘贴并执行下面的JS代码:
(function(){var
c=["_1977","aden","brannan","brooklyn","clarendon","earlybird","gingham","hudson","inkwell","kelvin","lark","lofi","maven","mayfair","moon","nashville","perpetua","reyes","rise","slumber","stinson","toaster",
"valencia","walden","willow","xpro2"];document.head.insertAdjacentHTML("beforeend",'');var
b=document.createElement("select");b.style.padding="5px";b.innerHTML=c.map(function(d){return''+d+""}).join("");var a=document.createElement("label");a.style.margin="0 5px 0 20px";a.innerHTML="后期效果:";toolbar_module.appendChild(a);toolbar_module.appendChild(b);b.addEventListener("change",function()
{document.querySelector(".bilibili-player-video").className="bilibili-player-video "+this.value})})();
这个时候,视频下方位置会出现一个选择“后期效果”的下拉框:
例如我们选择aden等滤镜效果,可以看到如下所示的录屏效果:
//zxx: B站肯定会改版的,上面代码随时可能失效,大家领会其精神即可……
这就为我们视频做,后期提供了更多的思路,我们不需要在视频剪辑软件里面专门做这样的事情,只需要视频发布后一段简单的css代码就可以实现我们想要的后期效果,成本低,效果好,且非常灵活,值得尝试。
五、结束语
又是一年高考时,我考试的问题在于太过于放松,以至于影响专注度,这对于数学这种需要沉浸式思考的学科而言是极为不利的,我们学校就是考点,然后考数学的时候,学校做了件我认为很傻×的事情。
考数学(其他学科都没有)前,学校为了缓解考生的压力,用广播不停循环播放“阳光总在风雨后”这首歌。妈呀,我本来就一点压力都没有过于放松了,结果这一放,导致自己更放松,然后脑中这首歌一直在不断自动循环播放,进入考场的时候还在放,做题目的时候还在放,脑中全是这首歌,我就知道我高考完了,一道很靠前的大题居然一个字都没动,等一出考场,脑中的歌没了,我立马就知道那道题怎么解了,很简单的一道题目。
最终我的高考成绩要比平时平均水平要差一些,整个高三所有的考试无论大考小考模拟考,我从来都是全班第一名,但是就是最重要的高考是班级第二名,年级六七名的样子。高考这天学校放歌这件很傻×的行为影响了我数学的考试状态,我记得就考了110多分,比平时平均分数少了20多分。
高考不利的还不止这个,高一的时候考试是考8门的,政治,历史,地理都是独立科目,后来我们那一届高考改革3+2,2就是自己选择2门科目。这个改革对我来说是非常不利的,高一时候考8门,我期中考期末考全部都是全校第一,要比第二名分数总分高20多分。因为我的强项就是全部都很强,没有偏科,尤其政治,历史,地理这样的科目优势明显。但是3+2之后,那些偏科的同学就可以直接规避,我在分数上的竞争力就下来了。
但是人生毕竟是一个长跑,高考虽然重要,但并不代表以后你的成就和高度,最终你的社会上所取得的成绩还是靠你的综合实力的,因此虽然那些偏科的同学因为政策考了跟我一样的分数,但是回到社会这个大染缸里,最终出类拔萃的还是我,哈哈哈。
不好意思,又唠叨了,发了一点和文章内容无关的小感慨。
就说这么多吧,感谢您的阅读,祝您端午节快乐!
本文为原创文章,欢迎分享,勿全文转载,如果内容你实在喜欢,可以加入收藏夹,永不过期,而且还会及时更新知识点以及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8692
(本篇完)
html图片滤镜,纯CSS图片滤镜项目CSSgram简介相关推荐
- css 加载图片,纯CSS图片预加载
译自:[Creating a CSS Image Preloader](http://www.devirtuoso.com/2009/07/creating-a-css-image-preloader ...
- 前端开发css中怎么让图片居中?css图片居中的方法总结
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来 ...
- css中怎么让图片居中?css图片居中的方法总结
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来 ...
- 纯CSS图片缩放后显示详细信息
哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...
- html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
- 纯css 图片自动旋转动画
css能否实现图片自动旋转动画呢?答案当然是肯定的, 首先看下效果: HTML代码 <img src="https://gimg2.baidu.com/image_search/src ...
- 【CSON原创】 纯CSS图片放大浏览效果
效果预览: 前些天无意中看到的一条阿里巴巴前端面试题,该题目如下: 当鼠标略过某个区块的时候,该区块会放大25%,并且其他的区块仍然固定不动. 发现这种效果还是挺常用的,所以用纯css做了个类似的效果 ...
- php图片居中显示图片,怎样让css图片居中显示
在项目中我们也经常会遇到这种情况,要让图片居中显示,方法有很多,不过最推荐的就是用CSS来操作DIV,那么下面就给大家举介绍俩种方法,用CSS操作让图片居中显示. 首先让图片中DIV对象盒子内水平居中 ...
- html图片文字下方,css图片下边怎么加字
css图片下边怎么加字 比较简单的做法就是,将他们放置在一个盒子内,让文字跟图片居中,只需要利用css样式的text-align属性即可,并且各个浏览器都会正常显示,代码如下: 这里是居中的文字 .b ...
最新文章
- c+语言+null,C/C++语言中NULL、'\0’和0的区别
- 智能待办,让老师真正的快乐
- 微软职位内部推荐-SW Engineer II for WinCE
- 我在大学主修计算机 英语,托福雅思英语: 我在大学主修计算机
- php 斗鱼人数,斗鱼旭旭宝宝再度登顶指数榜首位 单日弹幕人数高达48万人
- [蓝桥杯][2017年第八届真题]合根植物
- 腾讯云服务器数据盘买多了,腾讯云Windows云服务器数据盘分区和格式化
- Webpack入门教程二
- 打印一种拓扑排序(假定给的是有向无环图时)DFS+栈
- sequence to sequence模型
- 为什么你需要软件运维服务
- 用Java写linux命令行cd,java执行linux命令cd
- 小米商城网页制作大全-完结篇
- 从哈密尔顿路径谈NP问题
- python人像录制加声音_简单易用的录制屏幕与摄像头工具
- 关于LVM快速扩展Linux根目录/,缩减重挂载/home目录
- Python入门-Day5
- 小技巧 - 一键查看身份证名下所有支付宝账户(可选择注销)
- 微信小程序接入微信支付流程
- 设计模式—策略模式的设计与使用
热门文章
- java开发工具(JVM,JRE,JDK)
- 每日一问|数据仓库面试题这些你都会吗?
- ROS2入门教程—创建一个简单的订阅者和发布者(C++版)
- 利用datetime进行日期获取,比如前100天的日期
- SEED-lab:Heartbleed Attack Lab
- jQuery相册插件(开源下载)
- MySQL《多表连接操作2》
- 【EHub_tx1_tx2_E100】Ubuntu18.04 + ROS_ Melodic + RS-LiDAR-16 激光雷达测试
- 如何在JavaScript中使用高阶函数
- python bottle使用实例