CSS3のブレンドモードを利用して、君もベテランブレンダーになろう。

      2019/05/16

CSS3のブレンドモードを利用して、君もベテランブレンダーになろう。

こんにちは。
30度を超す日もあり初夏の趣きもあるこの頃ですが、
CSS3のブレンドモード(描画モード)にはまっております。

いいですね。ブレンドモード。
繰り返しの透過の背景画像なんかに利用しています。
上のボディビルダーの画像もブレンドモードです。

ブレンドモード(描画モード)は非デザイナーは聞き慣れないかもしれませんが、Photoshopなどでおなじみの機能で、デザイナーなら割と日常的に使っている機能です。

2つ以上の画像またはカラーを重ねあわせて、いろいろな描画表現ができます。今まで効果を加えた画像は、その状態で準備する必要があったんですが、CSS3で描画モードを使えば不要になるということですね。

さっそく、サンプル一覧を作成しましたのでご覧ください。

デモ・サンプル

左が通常の状態、右が各ブレンドモードを適用させた状態です。
それぞれ、同じ画像を重ねたり背景色をつけたりして、効果をわかりやすくしています。

CSSコード

/* ブレンドモード */
.multiply { mix-blend-mode: multiply; } /* 乗算 */
.screen { mix-blend-mode: screen; } /* スクリーン */
.overlay { mix-blend-mode: overlay; } /* オーバーレイ */
.color-burn { mix-blend-mode: color-burn; } /* 焼き込み */
.color-dodge { mix-blend-mode: color-dodge; } /* 覆い焼き */
.soft-light { mix-blend-mode: soft-light; } /* ソフトライト */
.hard-light { mix-blend-mode: hard-light; } /* ハードライト */
.darken { mix-blend-mode: darken; } /* 比較(暗) */
.lighten { mix-blend-mode: lighten; } /* 比較(明) */
.difference { mix-blend-mode: difference; } /* 差の絶対値 */
.exclusion { mix-blend-mode: exclusion; } /* 除外 */
.hue { mix-blend-mode: hue; } /* 色相 */
.saturation { mix-blend-mode: saturation; } /* 彩度 */
.color { mix-blend-mode: color; } /* カラー */
.luminosity { mix-blend-mode: luminosity; } /* 輝度 */

テキストや画像などの要素に直接適用できる「 mix-blend-mode 」と、
背景に適用できる「 background-blend-mode 」とがあります。

/* 背景ブレンドモード */
.bg-multiply { background-blend-mode: multiply; } /* 乗算 */
.bg-screen { background-blend-mode: screen; } /* スクリーン */
.bg-overlay { background-blend-mode: overlay; } /* オーバーレイ */
.bg-color-burn { background-blend-mode: color-burn; } /* 焼き込み */
.bg-color-dodge { background-blend-mode: color-dodge; } /* 覆い焼き */
.bg-soft-light { background-blend-mode: soft-light; } /* ソフトライト */
.bg-hard-light { background-blend-mode: hard-light; } /* ハードライト */
.bg-darken { background-blend-mode: darken; } /* 比較(暗) */
.bg-lighten { background-blend-mode: lighten; } /* 比較(明) */
.bg-difference { background-blend-mode: difference; } /* 差の絶対値 */
.bg-exclusion { background-blend-mode: exclusion; } /* 除外 */
.bg-hue { background-blend-mode: hue; } /* 色相 */
.bg-saturation { background-blend-mode: saturation; } /* 彩度 */
.bg-color { background-blend-mode: color; } /* カラー */
.bg-luminosity { background-blend-mode: luminosity; } /* 輝度 */

opacityとかrgbaで透過させることで微妙なフィルター効果も再現できると思います。うまく使い分ければ、君もベテランブレンダーや!

各ブラウザの対応状況も進んできています。
最近は画像も大きく使うことが増えてきたので、
一手間効果を加えるだけで印象アップできることうけあいです。

是非、参考になさってください。

デモ・サンプル

参考サイト

http://www.webcreatorbox.com/tech/css-blend-mode/
http://blog.cntlog.net/?p=952

以上