CSSのブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods' Digital Garden

Post on:2023年5月17日

sponsors

CSSのブランドモードは、知っているけどあまり使用したことがないという人もいると思います。そんなCSSのブレンドモードを使用して、さまざまな美しいデモでインタラクティブに学べるサイトを紹介します。

CSSのブレンドモードは、IEを除くデスクトップ・スマホのすべてのブラウザでサポートされています。

Brad Woods' Digital Gardenは、Web上で作成するための設計図になることを目的としたサイトです。CSSをはじめ、HTMLやSVG、JavaScript、WebAPIなど、Webの実装に役立つさまざまなコンテンツが揃っています。

それらの中から最近リリースされた、CSSのブレンドモードを紹介します。ページのデザインも美しく、インタラクティブなデモがたくさんあるので、見ているだけでも楽しめます。

まずは、CSSブレンドモードの基礎から。
CSSのブレンドモードを使用すると、重なっているピクセルをブレンドできます。

デモの「Drag me」をドラッグすると、ブレンドモードでどのようにピクセルが重なるかがよく分かります。

CSSのブレンドを有効にするプロパティは、2つあります。

mix-blend-mode: overlay;を使用すると、カラー・ノイズ・イメージ・シャドウ・グラデーションをブレンドして紙のエフェクトを生み出すことができます。

オーバーレイを使用すると、カラー、ノイズイメージ、シャドウ、グラデーションをブレンドして紙の効果を生み出すことができます。オーバーレイは暗い色をより暗くし、明るい色をより明るくします。 50% グレーなどの中間範囲は影響を受けません。

上のレイヤーに黒と透明のグラデーションを使用し、下のレイヤーに画像を配置します。黒で覆われた部部分はグレースケールなり、透明部分で覆われた部分は影響を受けません。

CSSのブレンドモードを使用すると、デュオトーンも簡単です。
グレースケールに変換した画像を配置したレイヤーの上に、2つの色のレイヤーを用意します。画像の暗い部分と明るい部分がそれぞれ別の色に置き換わることによって、デュオトーンのエフェクトが作成できます。

ハーフトーンは画像を色や線で表現するのではなく、画像を一連の小さなドットで構成し、それらのドットのサイズや配置を変えることによって、グラデーションやトーンの効果を再現することです。CSSのブレンドモードを使用すると、ハーフトーンで鮮やかなコントラストを生み出すこともできます。

スキャンライン、水平方向の走査線をmix-blend-mode: overlay;を使用して画像に追加することもできます。背景が明るいと前景も明るくなり、背景が暗いと前景も暗くなります。

エンボスは、平面の文字や絵柄に立体的な浮き出し感や凹凸感を与えるエフェクトです。CSSのブレンドモードでは、画像の3つのコピーを使用してエンボスを作成できます。

別の要素とのブレンドは、isolation: isolate;を持つ親要素を追加することで防ぐことができます。