如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效

techbrood 发表于 2016-11-29 00:18:02

标签: css3, filter, 图像特效

- +

在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,

本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。


我们首先实现一个勾勒轮廓的效果,这可以通过两张相同背景图细微错位然后求差值来获得:

.colored-pencil-effect:before {
        background-image: url(/uploads/161101/happy.jpg), url(/uploads/161101/happy.jpg);
        background-blend-mode: difference;
        background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
}

上面的样式代码将得到如下效果:

blob.png

由于是difference混合,那么颜色越接近的地方越黑,不存在人物的地方由于几个像素区域之间颜色几乎一样,所以经过这个混合后基本上都是黑色,而有人物的地方重点勾勒出了边界处。

接下来,我们给这个图加上反色滤镜、2倍亮度和灰度滤镜(也就是去掉彩色)效果:

.colored-pencil-effect:before {
        background-image: url(/uploads/161101/happy.jpg), url(/uploads/161101/happy.jpg);
        background-blend-mode: difference;
        background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
        -webkit-filter: brightness(2) invert(1) grayscale(1);
        filter: brightness(2) invert(1) grayscale(1)
}

现在图片看起来像下面这样:

blob.png

已经有点接近最终效果了,我们现在只要给这个灰度轮廓图涂上颜色即可,这刚好可以通过color混合模式来达到:

.colored-pencil-effect:after {
    background: inherit;
    mix-blend-mode: color;
    background-image: url(/uploads/161101/happy.jpg);
    background-size: cover;
    background-position: 50%;
}

color混合模式取上层(:after)的颜色和饱和度,取下层(原图img元素和:before的复合结果)的亮度,这样我们就得到了最终的效果图如下:

blob.png

我们把这个称之为彩色蜡笔或者时光机特效。

我们注意到使用:before,:after伪元素来辅助完成图像混合是非常方便的。

CSS3执行混合计算时,有一个和z-index相关的堆栈上下文(Stacking Context)的概念,可参考阅读:

https://drafts.csswg.org/css21/visuren.html#x43

possitive(1) views4608 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • 2019年开源WebRTC媒体服务器选型比较

    什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...

  • 谷歌ARCore技术特性简介

    谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • CSS3弹性布局内容对齐(justify-content)属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...

  • HTML5动画背后的数学 - 粒子群仿生算法简介

    本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • Three.js入门教程6 - 创建全景图和纹理

    全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...

  • Three.js入门教程1 - 基础知识和创建一个红色球体

    [ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
    Google的工程师Paul在网站aerotwist.com上...

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • 更多...