CSS 2020.10.21

CSSでブレンドモードが指定できるプロパティmix-blend-modeを試してみる

Tags： CSS3,HTML5

CSSには様々なプロパティが続々と追加されていますが、今回はその中でも比較的モダンなプロパティである「mix-blend-mode」についてまとめてみたいと思います。このプロパティですが描画モードを指定できるものとなり、PhotoshopやAdobeXD、Sketchなどのデザインツールでレイヤーを重ねた時などによく使われるレイヤーを描画モードを設定する機能と同じものになります。描画モードについて詳しくは過去記事「Photoshopで登場するレイヤー描画モードの種類について」をご参照ください。

描画モードを指定することで、それぞれの要素を重ねた時の見え方に変化をつけられますので、デザインの表現や馴染ませたりする時などに役立ちます。下記はデザインツールで描画モードを設定している様子ですが、こういったことがCSSでも出来るようになります。

これまではデザインツールでビットマップ画像として書き出していたものが、CSSで表現できるようになるということになります。こうすることで、例えばCSSアニメーションと組み合わせて徐々に変化させたり、JavaScriptと組み合わせてイベントトリガーに合わせて変更するということが可能になります。

使い方もシンプルで、ベースレイヤーとなる要素の上に合成レイヤーとなる要素を重ねるように配置し、表面に配置される要素に対して、下記のようにmix-blend-modeプロパティに描画モードの値を指定するだけでOKです。

// HTML
<div>
  <img class="base-layer" src="base.jpg" alt="">
  <img class="blend-layer" src="blend.jpg" alt="">
</div>

// CSS ※一部抜粋
.blend-layer {
  mix-blend-mode: overlay;
}

今回はこちらの写真素材と合成レイヤーの画像を使って、実際に描画モードをCSSで指定してみたいと思います。合成レイヤーの画像は変化がわかりやすいように3原色とグレースケールをそれぞれグラデーションにしたものを用意しています。

それではこの2つの画像を重ね合わせてみて、それぞれ描画モードを色々と試していきたいと思います。それぞれ描画モードの値を設定したものを下記に並べています。

【乗算：multiply】

その名の通り、ベースの要素とブレンドさせる要素の色味がかけ合わさったような形になりますので、全体的に暗く見えるようになります。

【焼き込み：color-burn】

ブレンドされる要素を重ねてコントラストを強くした見た目になります。色味がある場合には鮮やかになり、暗く濃くなります。

【比較（暗）：darken】

ベースの要素と比較して暗い部分が残り、明るい部分にブレンドする色味が反映されるような見た目になります。

【スクリーン：screen】

乗算と同じくブレンドする要素がかけ合わさりますが、反転した色が掛け合わされるので元のイメージより明るくなります。

【覆い焼き：color-dodge】

ブレンドされる要素を重ねてコントラストを強くした見た目になります。色味がある場合には明るく、鮮やかになります。

【比較（明）：lighten】

ベースの要素と比較して明るい部分が残り、暗い部分にブレンドする色味が反映されるような見た目になります。

【オーバーレイ：overlay】

ベースの要素とブレンドさせる要素の色味がかけ合わされ、明度差とコントラストが強くなり、明るく鮮やかでメリハリのある見た目になります。

【ソフトライト：soft-light】

ベースの要素とブレンドさせる要素を比較して、明度50%のグレーを基準に、明るいところは覆い焼きカラーになり、暗い部分は焼き込みカラーになります。コントラストは抑えられるので、馴染ませるときに有効です。

【ハードライト：hard-light】

ベースの要素とブレンドさせる要素を比較して、明度50%のグレーを基準に、明るいところはスクリーンになり、暗い部分は乗算になります。よりコントラストがはっきりした見た目になり、暗いところと明るいところの差が大きくなります。

【差の絶対値：difference】

ベースの要素とブレンドさせる要素を比較して、明るい方から暗い方の色が取り除かれ、色味が反転したようなイメージになります。明るい色味の場合には明暗も反転するようになります。

【除外：exclusion】

ベースの要素とブレンドさせる要素を比較して、コントラストの強い方からコントラストに弱い方の色が取り除かれ、色味が反転したようなイメージになります。コントラストが強くなると色味も反転するようになります。

【色相：hue】

ベースの要素の輝度と彩度に合わせて、ブレンドさせる要素の色相が反映されます。したがって無彩色の場合には白黒に近づくようになり、色味がある場合にはその色味のモノトーンのような見た目になります。

【彩度：saturation】

ベースの要素の輝度と彩度に合わせて、ブレンドさせる要素の彩度が反映されます。したがって無彩色の場合には白黒に近づくようになり、色味がある場合にはその色味に合わせてより鮮やかに見えるようになります。

【カラー：color】

ベースの要素の輝度と彩度に合わせて、ブレンドさせる要素の色相と彩度が反映されます。したがって無彩色の場合には白黒に近づくようになり、色味がある場合にはその色味が反映され、かつ鮮やかに見えるようになります。

【輝度：luminosity】

ベースの要素の色相と彩度に合わせて、ブレンドさせる要素の輝度が反映されます。色味がある場合にはその色味の輝度のみが反映されるので、元の色味は見えなくなります。

いかがでしょうか、このように要素同士を重ねた時の描画モードもCSSで設定できるようになります。本来はデザインツールで調整していたことが直接HTML上で変更できるのはかなり便利ではないでしょうか。またデザイン表現の幅も広がりそうですね。一部ブラウザは対応していないのですが、モダンブラウザに限れば問題なく使えますので、ぜひ積極的に取り入れていきたいものですね。

（参考にさせて頂いたサイト）
mix-blend-mode – CSS: カスケーディングスタイルシート | MDN