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

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

※この記事が公開されたのは1年2ヶ月前ですが、 8月24日に内容をメンテナンスしています。
公開 / 更新

mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。2015年初頭まではChrome CanaryFirefox AuroraWebKit 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の名称にあわせてブレンドモードと記載しています。

Adobeのデザインツールにはブレンドモードが標準搭載されている

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

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

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

※このデモはAngularJS 1.4UI 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 Blossoms</div>

CSS3 MixBlendModeのサンプル

次のページでは、mix-blend-modeで設定できるプロパティーを解説します。

池田 泰延

池田 泰延

ICS代表。筑波大学 非常勤講師。ICS MEDIA編集長。個人実験サイト「ClockMaker Labs」やセミナー・書籍執筆などの活動を通して積極的にインタラクションデザインの情報共有に取り組んでいる。著書に「Flash for HTML5」「Stage3Dプログラミング」など多数。