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

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

QR コード染色ツールの作成

上記の知識に基づいて、グラデーション カラー QR コード ツールを簡単に構築できます。

ここでは単純に実装しました:

通常の QR コードをアップロードし、グラデーション カラーをカスタマイズし、くり抜きが必要かどうか、くり抜きのタイプとサイズを選択することで、グラデーション カラーの QR コードをすばやく作成します。

簡単なデモ:

CSS をコアとして使用する小さなツールが完成しました。

完全なコードについては、ここをクリックしてください: CodePen - グラデーション QrCode の作成

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

最後に

要約すると、この記事では、CSSブレンディングモードを使用してグラデーションQRコードを取得するためのヒントを紹介し、maskまたはclip-path中空グラデーショングラフィックスを使用します。 、関連する知識ポイント。まだ質問がある場合は、次の記事を読むことをお勧めします:

• 信じられないほどのミックス ブレンド モード
• 信じられないほどのブレンド モード、background-blend-mode
• 画像の任意の色付け技術を実現するための 2 行の CSS コード
• 素晴らしい CSS MASK
• CSS を賢く使用して、カラフルな三角形の境界線アニメーションを実現します

さて、この記事はここで終わります。お役に立てば幸いです :)

元のアドレス: https://segmentfault.com/a/1190000041543121

著者: chokcoco

(学習ビデオ共有: Web Frontはじめにを終了)

以上がCSS を賢く使って、普通の黒い QR コードに色のグラデーションを追加する方法について話しましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。