巧用 CSS 构建渐变彩色二维码
今日,群里有个很有意思的问题,问我如何实现一个彩色的,带渐变的二维码,像是这样:
很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维码的功能。但是它们大部分都是 Canvas 或者其它编程语言实现的。
如果我们现在已经有了一张白底黑字的普通二维码,想把它变成一个渐变色的二维码?该如何做呢?
本文就将介绍,使用 CSS,快速将一个普通黑色二维码,变成任意我们想要的彩色渐变二维码。
强大的混合模式
拥有一张原图,想改变其颜色。在 CSS 中,我们很快可以想到 滤镜 filter、或者是 混合模式 mix-blend-mode。
这里,我们就需要用到 混合模式 mix-blend-mode。混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。目前 CSS 已经原生支持了大部分的混合模式。
原理其实非常简单,我们实现一张渐变图形,这张图形通过混合模式中的 mix-blend-mode: lighten
与白底黑字的二维码重叠在一起后,二维码中的白色区域将保持不变,而二维码中的黑色区域将展现为渐变图案中的颜色。
听起来有点绕,通过一个示意图,一看就懂,我们只需要两层,原二维码为一层,然后将渐变图案叠加在其之上,并且设置 mix-blend-mode: lighten
即可:
<div class="g-container">
<img src="qrcode.png">
</div>
.g-container {
position: relative;
width: 200px;
height: 200px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(45deg, #673ab7, #ff5722);
mix-blend-mode: lighten;
}
}
这里,我们用父元素的伪元素节省一个标签,用作渐变图层,实际的重叠效果,我制作了一个动画:
这样,我们可以通过混合模式,将一张黑色的二维码图片,变成了渐变色。
二维码中间镂空
当然,这还没完,有的时候,我们的二维码中间还会有一些图案,有一张圆形的或者方形的图片。
如果使用上述方法,会有一些瑕疵:
那么,我们还需要根据二维码的样式,将渐变图案中间镂空!
有意思的是,二维码中间的图案,还会有圆形和矩形两种,对于这两种二维码,处理的方式还不太一样。
渐变图案中心镂空一个圆形
对于中心图案是圆形的二维码,我们只需要实现这样一个渐变再叠加即可:
这个还是比较简单的,由于原本是一个线性渐变,中间需要镂空一个圆形,最好的方式是使用 mask
:
div {
background: linear-gradient(45deg, rgb(51, 102, 153), rgb(255, 0, 204));
mask: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 16%, rgb(0, 0, 0) 16%);
}
渐变图案中心镂空一个矩形
但是,对于中间是一个矩形的话,就不太好办了,我们需要基于渐变图案实现这样一个图形:
方法其实也有很多,譬如我们把中间透明部分想象成一个 div 的 content 部分,而周围渐变颜色区域是边框区域。
当然,这里我使用了 clip-path
,使用它,也是可以非常方便的实现镂空的矩形:
div {
background: linear-gradient(45deg, rgb(51, 102, 153), rgb(255, 0, 204));
clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 34%, 66% 34%, 66% 66%, 34% 66%, 34% 100%, 100% 100%, 100% 0%);
}
制作一个二维码染色工具
基于上面的知识,我们就可以简单的构建一个渐变彩色二维码工具了。
这里我简单实现了一个:
我们通过上传一个普通二维码,通过自定义渐变颜色,选择是否需要镂空,镂空的类型及大小,快速制作一个渐变彩色二维码。
简单演示一下:
一个核心利用 CSS 的小工具就完成啦。
完整的代码,你可以戳这里:CodePen - Make A Gradient QrCode
最后
总结一下,本文介绍了利用 CSS 混合模式得到渐变二维码的小技巧,并且利用了 mask
或者 clip-path
镂空渐变图形,一些相关知识点如果你还有所疑问,推荐你再看看我的下列文章:
- 不可思议的混合模式 mix-blend-mode
- 不可思议的混合模式 background-blend-mode
- 两行 CSS 代码实现图片任意颜色赋色技术
- 奇妙的 CSS MASK
- 巧用 CSS 实现炫彩三角边框动画
好了,本文到此结束,希望对你有帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
巧用 CSS 构建渐变彩色二维码的更多相关文章
- C# 生成二维码,彩色二维码,带有Logo的二维码及普通条形码
每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默.我眼中的程序员大多都不 ...
- Android之自定义生成彩色二维码
先导个zxing.jar包 下面是xml布局 activity_main.xml <RelativeLayout xmlns:android="http://schemas.andro ...
- jquery.qrcode二维码插件生成彩色二维码
jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式. (jquery.qrcode.js 设置显示方式为tab ...
- 二维码彩色广告招牌的切割制作问题(C#.net下对彩色二维码圆角样式及改进)
原文:二维码彩色广告招牌的切割制作问题(C#.net下对彩色二维码圆角样式及改进) 我们知道,目前二维码还很少用于广告招牌的制作.但随着智能手机越来越普及,互联网等网络的应用也越来越广泛,作为连接物理 ...
- online QRcode generator , QRcode=== (Quick Response Code) , 二维条码,二维码,彩色二维码,图片二维码,
online QRcode generator , QRcode=== (Quick Response Code) , 二维条码,二维码,彩色二维码,图片二维码, 1 http://cli.i ...
- Python之一行代码将网址URL转换成动态彩色二维码
先在 pycharm 安装 myqr.或者,Python3 必装,然后命令行 pip install myqr 也可. 将我的微信公众号网址:http://weixin.qq.com/r/hRMQC ...
- 如何用jenkins实现自动化构建新版本和二维码下载
最近公司开发了自己的app,研发过程中对于测试人员来说,经常会像开发的人员询问,有没有最新的包啊(apk打包后的新版本),以免你测试的时候,提交了一些缺陷,实际上人家已经解决了.当然你也可以说你们公司 ...
- iOS系统原生 二维码的生成、扫描和读取(高清、彩色)
由于近期工作中遇到了个需求:需要将一些固定的字段 在多个移动端进行相互传输,所以就想到了 二维码 这个神奇的东东! 现在的大街上.连个摊煎饼的大妈 都有自己的二维码来让大家进行扫码支付.可见现在的二维 ...
- 二维码名片的格式 - vcard(非常好,可直接添加到手机通讯录)
分享到 一键分享 QQ空间 新浪微博 百度云收藏 人人网 腾讯微博 百度相册 开心网 腾讯朋友 百度贴吧 豆瓣网 搜狐微博 百度新首页 QQ好友 和讯微博 更多... 百度分享 登录|注册 ...
随机推荐
- 一致性协议之ZAB
前言 一致性协议 包括 Paxos,Raft,2PC,3PC等等,今天我们讲一种协议,ZAB 协议,该协议应该是所有一致性协议中生产环境中应用最多的了.为什么呢?因为他是为 Zookeeper 设计的 ...
- 出现Table ‘./mysql/proc’ is marked as crashed and should be repaired
一般这种表崩溃的问题出现在mysql异常停止,或者使用kill -9命令强行杀掉进程导致,进入MySQL命令行后,执行下面的命令即可修复'./mysql/proc'表 repair table mys ...
- JUC并发包学习
1.什么是JUC java.util工具包.包.分类 业务:普通的线程代码 Thread Runable:没有返回值.效率相对于Callable相对较低. 2.线程和进程 进程:一个程序.如:QQ.e ...
- 【HDU6662】Acesrc and Travel(树型Dp)
题目链接 大意 给出一颗树,每个点上有一个权值\(A[i]\),有两个绝顶聪明的人甲和乙. 甲乙两人一起在树上轮流走,不能走之前经过的点.(甲乙时刻在一起) 甲先手,并可以确定起点.甲想要走过的点权之 ...
- 搭建 Nginx 服务
今日内容 上一篇测试 c出现问题 web 服务 部署 Nginx 内容详细 上一篇测试 NFS共享文件步骤 - 服务端 [root@backup ~]# yum install nfs-utils r ...
- Solution -「AT 3913」XOR Tree
\(\mathcal{Description}\) Link. 给定一棵树,边 \((u,v)\) 有边权 \(w(u,v)\).每次操作可以使一条简单路径上的边权异或任意非负整数.求最少的操 ...
- 请你说说Spring
一. Spring是什么? 是一个轻量级的开源容器框架,用来装JavaBean,可以把其他的一些框架进行整合使用,使得开发更快,更简洁. 轻量级:占用空间小,非入侵式的(Spring中的对象不依赖于S ...
- 终极指南:企业级云原生 PaaS 平台日志分析架构全面解析
早些时候 Erda Show 针对微服务监控.日志等内容做了专场分享,很多同学听完后意犹未尽,想了解更多关于日志分析的内容.Erda 团队做日志分析也有一段时间了,所以这次打算和大家详细分享一下我们在 ...
- 都 2022 了,还不抓紧学 typeScript ?
Hi,我是前端人,今日与君共勉! 本篇文章主要介绍的是什么是 typeScript ? typeScript 与 javaScript 有什么关系呢?我们为什么要学习 typeScript ? 一.什 ...
- 使用hystrix监控时出现java.lang.ClassNotFoundException: com.netflix.hystrix.contrib.javanica.aop.aspectj.HystrixCommandAsp错误,导致无法启动
解决方法: 添加依赖 <dependency> <groupId>com.netflix.hystrix</groupId> <artifactId>h ...