CSS3のブレンドモードが素敵！
新プロパティmix-blend-modeを使いこなそう

メンテナンス済み / 株式会社ICS 池田 泰延
32
14
360

mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。2015年初頭まではChrome CanaryやFirefox Aurora、WebKit Nightly Builds等の開発用ブラウザでしか使えず、実験的な印象が強かったmix-blend-mode。しかし最近（2015年5月）になってInternet Explorerを除く主要ブラウザがこぞってサポートしたことで、使える環境が急に揃いました。

デザイナー視点だとブレンドモードはごく当たり前に使う機能の1つ。mix-blend-modeはWebの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。今回はmix-blend-modeの魅力と使い方をデモを交えて紹介します。

そもそもブレンドモードとは？

Adobe PhotoshopやIllustrator、After Effects、Animateなどアドビ系のソフトで昔から搭載されていますが、ブレンドモードはクリエイティブを作る上での基本機能の1つです。レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCSS3の名称にあわせてブレンドモードと記載しています。

CSSブレンドモードを試してみよう

CSSブレンドモードを試すことのできるデモを作成しました。左のドロップダウンメニューからmix-blend-modeの値を変化できるので、表示の違いを確かめてみてください。レイヤーの重なりのイメージは右側のチェックボックスのON/OFFをしてみるとわかりやすいと思います。

※このデモはAngularJS 1.4とUI Bootstrapを使って作成しています。

mix-blend-modeの使い方

このプロパティは2つの要素が重なったときの見え方の指定となるので、事前準備として2つ以上のDOM要素を用意して、それぞれを絶対座標を利用して重ねて配置しましょう。（z-index的に）上位の要素にmix-blend-modeを指定します。コードで書くと次の指定となります。

body {
  font-family: "Lucida Sans Unicode", "Lucida Grande",
    sans-serif;
}

.text {
  position: absolute;
  mix-blend-mode: overlay; /* オーバーレイを指定 */
  color: white;
  font-size: 150px;
  font-weight: bold;
  top: 200px;
  left: 30px;
}

<div class="box">
  <img src="https://farm8.staticflickr.com/7712/16969858599_908ef27aec_k_d.jpg" width="960"/>
</div>

<div class="text">Cherry Blossoms</div>

ブレンドモードのチートシート

ブレンドモードの効果を個々に解説します。CSSブレンドモードのチートシートとしてお役立てください。重ねているのは次の2枚の画像で、下位レイヤーに写真が、上位レイヤーにアンビエントのグラフィックを配置しています。上位レイヤーにのみCSSブレンドモードを適用しています。

暗い効果が得られるCSSブレンドモード

比較(暗)darken上下の画像を比較して暗いピクセルが表示される
乗算multiply暗い表現を作るときに使う描画モード
焼きこみcolor-burn乗算よりもより暗くなる描画モード

明るい効果が得られるCSSブレンドモード

比較(明)lighten上下の画像を比較して明るいピクセルが表示される
スクリーンscreen明るい表現を作るときに使う。かなり使える
覆い焼きcolor-dodgeスクリーンよりもより明るくなる。インパクトが得られるのでエフェクト作成時などこれもかなりよく使う

明暗両方の効果が得られるCSSブレンドモード

オーバーレイoverlay乗算とスクリーンの両方に近い効果が得られる。コントラストがあがるため見栄えの印象が上がる
ソフトライトsoft-light明るい部分はさらに明るく、暗い部分はされに暗くする
ハードライトhard-lightソフトライトよりも強い効果が得られる

差分が得られるCSSブレンドモード

差の絶対値difference二枚の画像の違いを可視化するのに役立つ
除外exclusion差の絶対値よりも弱い効果が得られる

色をベースにしたCSSブレンドモード

色相hueHSL色空間で合成。下位レイヤーの輝度(L)と彩度(S)、上位レイヤーの色相(H)を持つカラーが得られる
彩度saturationHSL色空間で合成。下位レイヤーの輝度(L)と色相(H)、上位レイヤーの彩度(S)を持つカラーが得られる
カラーcolorHSL色空間で合成。下位レイヤーの輝度(L)、上位レイヤーの彩度(S)と色相(H)を持つカラーが得られる
輝度luminosityHSL色空間で合成。下位レイヤーの彩度(S)と色相(H)、上位レイヤーの輝度(L)を持つカラーが得られる

ブラウザのサポート状況

サイト『Can I use』を確認する限り、Firefox/Chrome/Safariでサポートされていますが、残念ながら2019年4月現在もIEとMS Edgeでサポートされていません。

▲Firefox 32（2014年9月）、Chrome 41（2015年3月）、Safari 8（2014年10月）以上でサポートされています。

▲iPhone 6 Plus でもmix-blend-modeのプロパティが使えることを確認。モバイルサイトの表現に使っていきたい。

デスクトップ環境ではIEのためもう少し採用しづらい時期が続きますが、モバイル限定であればNGのブラウザが少ないため採用しやすいと思います。Microsoftが2019年4月に公開したChroniumエンジンのEdgeでは、mix-blend-modeを利用できました。

デザイナーを恨むことがなくなる

今まではブレンドモードとHTMLのマークアップは相性が悪いものでした。マークアップエンジニアの中には、デザイナーからあがってきたPSDに描画モードがこっそり使われているのを見つけて、ため息をついた方も多いでしょう。PSDの描画モードの見栄えを損なわないためにも、レイヤーの結合やスライスの切り方を工夫し、苦労していたのではないでしょうか？　―そしてその苦労は誰も理解してくれないわけですが・・・。

でもこれからはmix-blend-modeが使えるので、PSD通りのページを組む手間も少なくなるかと思います！　(とはいえ、CSSブレンドモードは処理負荷が高いので、エンドユーザーの負荷とならないように使い方は気をつけましょう）

続編記事「CSS3のmix-blend-modeで実現するドローイング表現」では、mix-blend-modeを使ったWebのインタラクションデザインの表現手法を紹介します。HTML5のcanvas要素やvideo要素と組み合わせると表現方法が広がっておもしろいですよ。お楽しみに！

※デモに利用している写真やグラフィックは筆者が撮影・作成したものです。写真はFlickrにアップしています。

余談

CSS Blendingはアドビ発の技術

W3Cの仕様を確認するとアドビのWebプラットフォームチームがmix-blend-modeの策定に関わっています（参考：『CSS Blending 入門 | ADC』)。グラフィックに強いアドビらしい取り組みですが、その影響もあってCSSブレンドモードはCreative Cloudのツール（とくにPhotoshop）と似たものになっています。なので、PhotoshopユーザーにはCSSブレンドモードは親しみやすいと思います。

似たプロパティーも存在する

mix-blend-modeに似たbackground-blend-modeプロパティというのがあります。これはbackground属性内でブレンドモードを実現するCSSプロパティです。これのサポート状況は早かったのですが（参考：『CSSブレンドモードで画像を彩ろう | Webクリエイターボックス』)、mix-blend-modeのほうが応用の幅が広いので、今回はこちらを紹介しました。

トップページに戻る