ホームページ > 記事 > ウェブフロントエンド > CSS を賢く使って、普通の黒い QR コードに色のグラデーションを追加する方法について話しましょう。

CSS を賢く使って、普通の黒い QR コードに色のグラデーションを追加する方法について話しましょう。

青灯夜游転載: 2022-07-14 10:34:142592ブラウズ

CSS を使用してグラデーションカラーの QR コードを作成するにはどうすればよいですか?以下の記事では、CSSを使って通常の黒色のQRコードに色のグラデーションを加える方法を紹介しますので、ぜひ参考にしてください。

今日、グループに非常に興味深い質問がありました。次のような、グラデーションのあるカラフルな QR コードを実装する方法を尋ねました。

とても興味深い質問です。Baidu Google で qrcode を検索すると、オンラインで QR コードを作成するツールがたくさん見つかります。中には QR コードを作成する機能を備えたツールもあります。グラデーションの関数QRコード。しかし、それらのほとんどは Canvas または他のプログラミング言語で実装されています。 [推奨学習: css ビデオチュートリアル ]

白の背景に黒のテキストを含む通常の QR コードがすでにあり、それをグラデーション QR コードに変換したい場合はどうすればよいですか?これを行う方法？

この記事では、 CSS を使用して、通常の黒の QR コードを任意の色のグラデーション QR コードにすばやく変換する を紹介します。

強力なブレンドモード

元の画像があり、その色を変更したいと考えています。 CSS では、filter フィルター、または ミキシングモード mix-blend-mode をすぐに考えることができます。

ここでは、ミキシングモード mix-blend-mode を使用する必要があります。ブレンドモードは Photoshop で最も一般的に見られ、PS の最も強力な機能の 1 つです。現在、CSS はすでにほとんどのブレンディングモードをネイティブにサポートしています。

原理は実際には非常に単純です。グラデーショングラフィックを実装します。このグラフィックは、ミキシングの mix-blend-mode: lighten を通じて、白い背景に黒いテキストを持つ QR コードを重ねます。結合すると、 QR コードの白い領域は変更されず、QR コードの黒い領域はグラデーションパターンの色 として表示されます。

少し複雑に聞こえますが、模式図を使えば一目で理解できます。必要なレイヤーは 2 つだけで、元の QR コードは 1 レイヤーで、その上にグラデーションパターンを重ねます。 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;
    }
}

ここでは、親要素の擬似要素を使用してラベルを保存し、それをグラデーションレイヤーとして使用します。実際のオーバーラップ効果をアニメーションにしてみました。

このようにして、ブレンドモードを使用して黒い QR コード画像をグラデーションカラーに変えることができます。

QR コードの真ん中にくぼみがあります

もちろん、これはまだ終わっていません。場合によっては、QR コードの真ん中に円形などのいくつかのパターンが現れることがあります。または正方形の絵。

上記の方法を使用すると、いくつかの欠陥があります:

次に、次のようにグラデーションパターンの中央をくり抜く必要もあります。 QRコードのスタイル！

興味深いことに、QR コードの中央には circular と rectangular という 2 種類のパターンがあります。この 2 種類の QR コードでは、どのような処理が行われますか?方法はまだ完全に同じではありません。

グラデーションパターンの中心が円でくり抜かれています

中心に円形のパターンがある QR コードの場合、実装する必要があるのは、次のとおりです。 :

これは比較的簡単で、もともと直線的なグラデーションなので、円の真ん中をくりぬく必要があります。方法は 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 のコンテンツ部分であり、周囲のグラデーションカラー領域が境界領域です。

もちろん、ここでは 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%);
}