Photoshopやその他グラフィックソフトで使用することのできる、
「乗算」「オーバーレイ」などといった、上下のレイヤー間の画像合成機能。

使用して得られる結果を熟知して、適切に使えば、より印象的な、すぐれたグラフィックを制作することができます。

今回は、そういった上下のレイヤー間の画像合成を、
cssで実現することができる mix-blend-mode についての記事です。

mix-blend-modeで使用できる、各プロパティの一覧

mix-blend-modeで使用できる、各プロパティの一覧を表にまとめました。

参考までにそれぞれどんな結果が得られるか、ざっくりと概要を記載してあります。

これらはすべて、次の例のように、
「 mix-blend-mode: プロパティ名; 」
の形式で指定することができます。

.sample {
  mix-blend-mode: multiply;
  /*↑この指定だと「乗算」効果が、このsampleというclassを付与した要素にかかります*/
}

コーディング業務をよく担当する方にとって、結構役に立つプロパティなのでは、と思っています

たとえばコーダーの方で、
psdデータだけがデザイナーから支給されて、「これを〇〇日までにコーディングしてください」という案件があったとします。

そんな案件で渡してもらったpsdデータが、レイヤー間で「乗算」や「オーバーレイ」を駆使しているデザインデータだった場合。
そのまま画像を書き出すだけでは同じ見た目が再現できず、困ったケースがあったかと思います。

そんな場合にも、css上で2つの画像合成をある程度再現することが可能なため、役立つcssプロパティかと思います。
(このプロパティがなかった頃は、「乗算」や「オーバーレイ」がかかっているレイヤー双方を一旦Photoshop上で結合して、それを画像として書きださなければ、同じ見た目を再現することが難しいケースが多かったと思います）

完全再現できるかというと、ちょっと工夫が必要かもしれませんが(デザインデータ上の透明度の指定を別途cssでも再現するため、opacityと併用したりする等)、

覚えておくと、意外と役に立つプロパティなのではないかと感じています。

背景と合成したくない場合は isolation: isolate; を指定する

単純に、親要素に単色の塗りつぶし背景色があり、
その子要素内に配置された画像と、親要素、その2つを合成することが目的である場合は、そのまま mix-blend-mode だけを使用すれば良いと思います。
ですが場合により、
「背景の影響は与えずに、子要素の複数の要素だけを合成したい。」
そんなケースもあるかと思います。

その場合には、親要素に次のように
isolation: isolate;
と指定をすることで、親要素が持つ背景とは合成が行われなくなります。

.parent-sample {
  background: #999;
  isolation: isolate;
  /* ↑これを指定すると、mix-blend-modeを使っている要素が、この要素の背景の影響を受けなくなる */
}
.child-sample01 {
  mix-blend-mode: multiple;
  (中略...子要素01のプロパティ...)
}
.child-sample02 {
  mix-blend-mode: multiple;
  (中略...子要素02のプロパティ...)
}

こちらも、mix-blend-mode を使用する上で、覚えておくと役に立つ指定かと思います。

MDN内の解説ページ

ご存じ、Mozillaが運営しているWeb技術に関するオンラインリファレンスサイト・MDN Web Docs内に、
この mix-blend-mode に関する解説ページがあります。
mix-blen-mode – css | MDN
↑こちらのページでは、どの効果を使うとどんな結果が得られるかの例が掲載されています。

当記事の上のセクションにある mix-blend-mode の各プロパティをまとめた表内の概要と併せて見てみると、
大体どんな効果が適用できるかわかってくるかと思います。

また、親要素の背景色の影響を受けさせたくない場合に使用できる isolation: isolate; についての解説ページは次になります。
isolation – CSS | MDN

この記事のまとめ

今回は、 Photoshopやその他グラフィックソフトで使用することのできる、
「乗算」「オーバーレイ」などといった、上下のレイヤー間の画像合成機能を、
cssのみで使うことができる mix-blend-mode について、書いてみました。

親要素の背景を単色の塗りつぶしで用意しておいて、
そこに入る子要素に「乗算」を使用したり、「オーバーレイ」を使用したり。
使い方次第では、より優れたビジュアルを制作することができるcssプロパティかと思います。

また、この記事の中段にも書きましたが、コーダーの方で、
psdデータだけがデザイナーから支給されて、「これを〇〇日までにコーディングしてください」という案件があったとき。

そんな案件で渡してもらったpsdデータが、レイヤー間で「乗算」や「オーバーレイ」を駆使しているデザインデータだった場合。
そのまま画像を書き出すだけでは同じ見た目が再現できず、困ったケースがあるかと思います。

そんな場合にも、css上で2つの画像合成をある程度再現することが可能なため、役立つcssプロパティかなと思ってます。
(繰り返しになりますが、このプロパティが使用できなかった頃は、「乗算」や「オーバーレイ」がかかっているレイヤー双方を一旦Photoshop上で結合して、それを画像として書きださなければ、同じ見た目を再現することが難しいケースが多かったと思います）

あまり頻繁に使うcssプロパティではないかもしれませんが、知っておくと便利なプロパティだと思ってます。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。