泰延CSS3214357mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。Builds等の開発用ブラウザでしか使えず、実験的な印象が強かったmix-blend-mode。Explorerを除く主要ブラウザがこぞってサポートしたことで、使える環境が急に揃いました。デザイナー視点だとブレンドモードはごく当たり前に使う機能の1つ。mix-blend-modeはWebの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。今回はmix-blend-modeの魅力と使い方をデモを交えて紹介します。Effects、Animateなどアドビ系のソフトで昔から搭載されていますが、ブレンドモードはクリエイティブを作る上での基本機能の1つです。レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCSS3の名称にあわせてブレンドモードと記載しています。CSSブレンドモードを試してみようCSSブレンドモードを試すことのできるデモを作成しました。左のドロップダウンメニューからmix-blend-modeの値を変化できるので、表示の違いを確かめてみてください。レイヤーの重なりのイメージは右側のチェックボックスのON/OFFをしてみるとわかりやすいと思います。Bootstrapを使って作成しています。mix-blend-modeの使い方このプロパティは2つの要素が重なったときの見え方の指定となるので、事前準備として2つ以上のDOM要素を用意して、それぞれを絶対座標を利用して重ねて配置しましょう。(z-index的に)上位の要素にmix-blend-modeを指定します。コードで書くと次の指定となります。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色空間で合成。Edgeでサポートされていません。8(2014年10月)以上でサポートされています。mix-blend-modeのプロパティが使えることを確認。モバイルサイトの表現に使っていきたい。デスクトップ環境ではIEのためもう少し採用しづらい時期が続きますが、モバイル限定であればNGのブラウザが少ないため採用しやすいと思います。Microsoftが2019年4月に公開したChroniumエンジンのEdgeでは、mix-blend-modeを利用できました。デザイナーを恨むことがなくなる今まではブレンドモードとHTMLのマークアップは相性が悪いものでした。マークアップエンジニアの中には、デザイナーからあがってきたPSDに描画モードがこっそり使われているのを見つけて、ため息をついた方も多いでしょう。―そしてその苦労は誰も理解してくれないわけですが・・・。(とはいえ、CSSブレンドモードは処理負荷が高いので、エンドユーザーの負荷とならないように使い方は気をつけましょう)続編記事「CSS3のmix-blend-modeで実現するドローイング表現」では、mix-blend-modeを使ったWebのインタラクションデザインの表現手法を紹介します。HTML5のcanvas要素やvideo要素と組み合わせると表現方法が広がっておもしろいですよ。お楽しみに!※デモに利用している写真やグラフィックは筆者が撮影・作成したものです。写真はFlickrにアップしています。Cloudのツール(とくにPhotoshop)と似たものになっています。PhotoshopユーザーにはCSSブレンドモードは親しみやすいと思います。似たプロパティーも存在するmix-blend-modeに似たbackground-blend-modeプロパティというのがあります。これはbackground属性内でブレンドモードを実現するCSSプロパティです。Webクリエイターボックス』)、mix-blend-modeのほうが応用の幅が広いので、今回はこちらを紹介しました。平成31年4月9日に内容をメンテナンスしています。