モダンブラウザで使えるようになったCSS3のブレンドモードが素敵！ mix-blend-modeの使い方と効果をまとめてみた
こんにちは、ICS池田です。
mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。今まではChrome CanaryやFirefox Aurora、WebKit Nightly Builds等の開発用ブラウザでしか使えず、実験的な印象が強かったmix-blend-mode。しかし最近(2015年5月)になってIEを除く主要ブラウザがこぞってサポートしたことで、使える環境が急に揃いました。デザイナー視点だとブレンドモードはごく当たり前に使う機能の一つ。mix-blend-modeはWebの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。今回はmix-blend-modeの魅力と使い方をデモを交えて紹介します。
※mix-blend-modeに似たbackground-blend-modeプロパティというのがあります。これはbackground属性内でブレンドモードを実現するCSSプロパティです。これのサポート状況は早かったこともあり面白いのですが(参考：CSSブレンドモードで画像を彩ろう | Webクリエイターボックス)、mix-blend-modeのほうが自由度があり応用の幅が広いので、今回はこちらを紹介しています。
そもそもブレンドモードとは？
Adobe PhotoshopやIllustrator、After Effects、Flash Professionalなどアドビ系のソフトで昔から搭載されていますが、ブレンドモードはクリエイティブを作る上での基本機能の一つです。レイヤーを重ねたときに上位のレイヤーを下位のレイヤーにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCSS3の名称にあわせてブレンドモードと記載しています。
余談ですが、W3Cの仕様を確認するとアドビのWebプラットフォームチームがmix-blend-modeの策定に関わっています(参考：CSS Blending 入門 | ADC)。グラフィックに強いアドビらしい取り組みですが、その影響もあってCSSブレンドモードはCreative Cloudのツール(特にPhotoshop)と似たものになっています。なので、PhotoshopユーザーにはCSSブレンドモードは親しみやすいと思います。
CSSブレンドモードを試してみよう
CSSブレンドモードを試すことのできるデモを作成しました。左のドロップダウンメニューからmix-blend-modeの値を変化できるので、表示の違いを確かめてみてください。レイヤーの重なりのイメージは右側のチェックボックスのON/OFFをしてみるとわかりやすいと思います。
※このデモはAngularJS 1.4とUI Bootstrapを使って作成しています。このデモのソースコードへのリンクは本記事の末尾に掲載しています。
mix-blend-modeの使い方
このプロパティは2つの要素が重なったときの見え方の指定となるので、事前準備として2つ以上のDOM要素を用意して、それぞれを絶対座標を利用して重ねて配置しましょう。(z-index的に)上位の要素にmix-blend-modeを指定します。コードで書くと次の指定となります。
CSS
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;}
HTML
<div class="box"> <img src="https://farm8.staticflickr.com/7712/16969858599_908ef27aec_k_d.jpg" width="960" /> </div> <div class="text">Cherry<br>Blossoms</div>
ブレンドモードのチートシート
それぞれのブレンドモードを個々に解説します。CSSブレンドモードのチートシートとしてお役立てくださいませ。ちなみに元になっているのは次の2枚の画像で、下位レイヤーに写真が、上位レイヤーにアンビエントのグラフィックを配置しています。上位レイヤーにのみCSSブレンドモードを適用しています。
暗い効果が得られるCSSブレンドモード
| 比較(暗) | darken | 上下の画像を比較して暗いピクセルが表示される |
|---|---|---|
| 乗算 | multiply | 暗い表現を作るときに使う描画モード |
| 焼きこみ | color-burn | 乗算よりもより暗くなる描画モード |
明るい効果が得られるCSSブレンドモード
| 比較(明) | lighten | 上下の画像を比較して明るいピクセルが表示される |
|---|---|---|
| スクリーン | screen | 明るい表現を作るときに使う。かなり使える |
| 覆い焼き | color-burn | スクリーンよりもより明るくなる。インパクトが得られるのでエフェクト作成時などこれもかなりよく使う |
明暗両方の効果が得られるCSSブレンドモード
| オーバーレイ | overlay | 乗算とスクリーンの両方に近い効果が得られる。コントラストがあがるため見栄えの印象が上がる |
|---|---|---|
| ソフトライト | soft-light | 明るい部分はさらに明るく、暗い部分はされに暗くする |
| ハードライト | hard-light | ソフトライトよりも強い効果が得られる |
差分が得られるCSSブレンドモード
| 差の絶対値 | difference | 二枚の画像の違いを可視化するのに役立つ |
|---|---|---|
| 除外 | exclusion | 差の絶対値よりも弱い効果が得られる |
色をベースにしたCSSブレンドモード
輝度colorHSL色空間で合成。下位レイヤーの彩度(S)と色相(H)、上位レイヤーの輝度(L)を持つカラーが得られる
| 色相 | hue | HSL色空間で合成。下位レイヤーの輝度(L)と彩度(S)、上位レイヤーの色相(H)を持つカラーが得られる |
|---|---|---|
| 彩度 | saturation | HSL色空間で合成。下位レイヤーの輝度(L)と色相(H)、上位レイヤーの彩度(S)を持つカラーが得られる |
| カラー | color | HSL色空間で合成。下位レイヤーの輝度(L)、上位レイヤーの彩度(S)と色相(H)を持つカラーが得られる |
| 輝度 | luminosity | HSL色空間で合成。下位レイヤーの彩度(S)と色相(H)、上位レイヤーの輝度(L)を持つカラーが得られる |
ブラウザのサポート状況
ササイト「Can I use」を確認する限り、Firefox/Chrome/Safariでサポートされていますが、残念ながらIEとMS Edgeが未サポートです。デスクトップ環境ではIEのためもう少し採用しづらい時期が続きますが、モバイル限定であればNGのブラウザが少ないため採用しやすいと思います(ただし旧式ブラウザは除く)。個人的にはMS Edgeは他のブラウザと足並みを揃えて、もう少し先端(=Edge)まで進化してきて欲しいと思いますが…。
iPhone 6 Plus でも mix-blend-mode のプロパティーが使えることを確認。モバイルサイトの表現に使っていきたい。
デザイナーを恨むことがなくなる
今まではブレンドモードとHTMLのマークアップは相性が悪いものでした。マークアップエンジニアの中には、デザイナーからあがってきたPSDに描画モードがこっそり使われているのを見つけて、ため息をついた方も多いでしょう。PSDの描画モードの見栄えを損なわないためにも、レイヤーの結合やスライスの切り方を工夫し、苦労していたのではないでしょうか？ ―そしてその苦労は誰も理解してくれないわけですが・・・。でもこれからはmix-blend-modeが使えるので、PSD通りのページを組む手間も少なくなるかと思います！ (とはいえ、CSSブレンドモードは処理負荷が高いので、エンドユーザーの負荷とならないように使い方は気をつけましょう)
次回はmix-blend-modeを使ったWebのインタラクションデザインの表現手法を紹介したいと思います。既にデモを作成しているのですが、HTML5のcanvas要素やvideo要素と組み合わせると表現方法が広がって面白いですよ。お楽しみに！
※デモに利用している写真やグラフィックは筆者が撮影・作成したものです。写真はFlickrにアップしています。またデモのソースコードはこちらのURLにZIPファイルとしてアップしています。