Home>Article>Web Front-end> Let’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!
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 searchqrcodeon 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.
Have an original image and want to change its color. In CSS, we can quickly think offilter filter, ormixing mode mix-blend-mode.
Here, we need to usemixing 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 themix-blend-mode: lightenin the mixing mode. Once together, the white areas in theQR code will remain unchanged, while the black areas in the QR code will appear as the colorin 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 setmix -blend-mode: lightencan be:
.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.
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:circularandrectangular. For these two types of QR codes, what are the processing methods? Not quite the same yet.
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 usemask:
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%); }
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 usedclip-pathhere. 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%); }
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
To summarize, this article introduces tips for using CSS blending mode to obtain gradient QR codes, and usesmaskorclip-pathhollow 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!