文章关键字 ‘mix-blend-mode’

mp4box.js加WebCodecs 解码MP4视频帧并渲染

2023年11月15日,星期三

封面图 风景 熊,树木,高山,湖

应该是国内第一篇专门介绍用mp4box.js和VideoDecoder方法解码MP4视频序列帧的文章了。

阅读全文…

CSS background背景图标的变色技巧

2022年01月31日,星期一

封面图

最近遇到了需要使用CSS让background背景图标的变色的需求场景,使用背景混合模式实现的,可能大家以后也用得到,所以分享下。

阅读全文…

几行CSS让整站支持深色模式的探索与拓展

2020年11月28日,星期六

黑夜中的猫头鹰 深色模式CSS

有两种CSS方法可以轻松实现深色模式效果,一种是借助filter滤镜,一种是借助mix-blend-mode混合模式,均是低成本高收益,详见本文介绍。

阅读全文…

HTML中无标签文本的CSS变色技巧

2020年11月15日,星期日

无标签文字的变色效果实现

介绍一种高级的CSS文字变色技巧,适用于文字外面是没有HTML标签,只能通过兄弟元素或其他不相干元素改变文字颜色的场景。

阅读全文…

深入理解CSS background-blend-mode的作用机制

2020年07月22日,星期三

七月的背景混合模式

CSS mix-blend-mode属性比较好理解,效果都符合预期,然而background-blend-mode属性的混合效果常出乎意料,那是因为背景混合模式的作用机制有一点特殊,本文就带大家深入理解background-blend-mode的作用机制。

阅读全文…

FDCon2019大会分享之滤镜与混合模式实录

2019年06月10日,星期一

第4届中国前端开发者千人峰会上我做了名为“滤镜与混合模式”主题分享,这里我把分享内容,尤其一些案例和源码整理成文,给需要的人,末尾有分享PPT文件的下载,内容较多,请提前预留足够学习时间。

阅读全文…

第五届CSS大会主题分享之CSS创意与视觉表现

2019年06月9日,星期日

第五届CSS大会主题分享之“CSS创意与视觉表现”文字版完全整理,共有10个纯CSS实现的创意案例,旨在展现CSS的潜力,同时激发你的CSS创意思维。每个案例都有demo,原理讲解,文末还有分享文档,希望对你CSS学习有所帮助。

阅读全文…

更好的纯CSS滚动指示器技术实现

2019年06月8日,星期六

滚动指示器封面图

我们可以使用纯CSS显示页面滚动百分比进度,传统实现是在body标签上做文章,但有致命缺陷,后来我借助混合模式实现了一种新方法,此方法可以规避传统实现的不足,使纯CSS滚动指示器效果在实际项目中应用成为了可能。

阅读全文…

纯CSS图片滤镜项目CSSgram简介

2019年06月7日,星期五

CSSGram项目封面图

本文介绍一个CSS项目CSSgram,借助css滤镜和混合模式实现Instagram中的26种滤镜效果,不仅可以作用于图片,还可以作用于视频。

阅读全文…

深入理解CSS mix-blend-mode滤色screen混合模式

2019年05月28日,星期二

无论在哪个语言中,无论是什么设计工具,滤色混合模式都是非常基础,非常常见的一种混合模式,如果你致力于在图形表现领域有所作为,一定要把这种模式的混合算法、特效以及应用场景记得滚瓜烂熟。

阅读全文…