search
HomeWeb Front-endCSS TutorialLet's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes!

How to use CSS to build gradient color QR code? The following article will introduce to you how to use CSS to add color gradients to ordinary black QR codes. I hope it will be helpful to you!

Let's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes!

Today, there was a very interesting question in the group, asking me how to implement a colorful QR code with gradient, like this:

Very interesting question. We search qrcode on Baidu Google and can find many tools for making QR codes online. Some of them also have the function of making QR codes. The function of gradient QR code. But most of them are implemented in Canvas or other programming languages. [Recommended learning: css video tutorial]

If we already have an ordinary QR code with black text on a white background, and want to turn it into a gradient QR code ? How to do this?

This article will introduce, Use CSS to quickly turn an ordinary black QR code into any color gradient QR code we want .

Powerful blending modes

Have an original image and want to change its color. In CSS, we can quickly think of filter filter, or mixing mode mix-blend-mode.

Here, we need to use mixing mode mix-blend-mode. Blending modes are most commonly found in photoshop and are one of the most powerful features in PS. Currently, CSS already natively supports most blending modes.

The principle is actually very simple. We implement a gradient graphic. This graphic overlaps the QR code with black text on a white background through the mix-blend-mode: lighten in the mixing mode. Once together, the white areas in the QR code will remain unchanged, while the black areas in the QR code will appear as the color in the gradient pattern.

It sounds a bit convoluted. Through a schematic diagram, you can understand it at a glance. We only need two layers, the original QR code is one layer, and then superimpose the gradient pattern on top of it, and set mix -blend-mode: lighten can be:

<div>
    <img  src="/static/imghwm/default1.png" data-src="qrcode.png" class="lazy" alt="Let's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes!" >
</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;
    }
}

Here, we use the pseudo element of the parent element to save a label and use it as a gradient layer. For the actual overlapping effect, I made an animation:

In this way, we can use the blending mode to turn a black QR code image into a gradient color.

There is a hollow in the middle of the QR code

Of course, this is not over yet. Sometimes, there will be some patterns in the middle of our QR code, including a round or square picture.

If you use the above method, there will be some flaws:

Then, we also need to hollow out the middle of the gradient pattern according to the style of the QR code!

Interestingly, there are two types of patterns in the middle of the QR code: circular and rectangular. For these two types of QR codes, what are the processing methods? Not quite the same yet.

A circle is hollowed out in the center of the gradient pattern

For a QR code with a circular pattern in the center, we only need to implement such a gradient and then superimpose it. :

This is relatively simple. Since it is originally a linear gradient, a circle needs to be hollowed out in the middle. The best way is to use 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%);
}

A rectangle is hollowed out in the center of the gradient pattern

However, if there is a rectangle in the middle, it is not easy to handle. We need to implement such a graphic based on the gradient pattern:

There are actually many methods. For example, we imagine the middle transparent part as the content part of a div, and the surrounding gradient color area is the border area.

Of course, I used clip-path here. Using it, it is also very convenient to realize a hollow rectangle:

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%);
}

Making a QR code dyeing tool

Based on the above knowledge, we can simply build a gradient color QR code tool.

Here I simply implemented one:

We quickly create a gradient color QR code by uploading a normal QR code, customizing the gradient color, selecting whether hollowing is required, the type and size of the hollowing out.

A brief demonstration:

A small tool that uses CSS as its core is now complete.

For the complete code, you can click here: CodePen - Make A Gradient QrCode

https://codepen.io/Chokcoco/pen/XWzPEXW

Finally

To summarize, this article introduces tips for using CSS blending mode to obtain gradient QR codes, and uses mask or clip-path hollow gradient Graphics, some related knowledge points. If you still have questions, I recommend you to read my following articles:

Okay, this article ends here, I hope it will be helpful to you :)

Original address: https://segmentfault.com/a/1190000041543121

Author: chokcoco

(Learning video sharing: Web Front End Introduction)

The above is the detailed content of Let's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes!. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
聊聊怎么巧用CSS给普通黑色二维码添上彩色渐变!聊聊怎么巧用CSS给普通黑色二维码添上彩色渐变!Jul 14, 2022 am 10:34 AM

怎么巧用 CSS 构建渐变彩色二维码?下面本篇文章就来给大家介绍一下利用CSS给普通黑色二维码添上彩色渐变的方法,希望对大家有所帮助!

利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.