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

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

150706_blend

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

blendmode-dark

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

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

blendmode-light

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

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

blendmode-over

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

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

blendmode-diff

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

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

blendmode-color

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

ブラウザのサポート状況

ササイト「Can I use」を確認する限り、Firefox/Chrome/Safariでサポートされていますが、残念ながら2016年8月現在もIEとMS Edgeでサポートされていません。デスクトップ環境ではIEのためもう少し採用しづらい時期が続きますが、モバイル限定であればNGのブラウザが少ないため採用しやすいと思います。個人的にはMS Edgeは他のブラウザと足並みを揃えて、もう少し先端(=Edge)まで進化してきて欲しいと思いますが…。

160824_mixblendmode_caniuse

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

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

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

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

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

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

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

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