使いどころがよく分からなくて、CSSのブレンドモードは、今まで一度も使ったことがありませんでした。対応ブラウザが少ないというのもありますし。

イメージでは背景色と背景画像をブレンドするものと捉えていましたが、実際には複数設定した背景画像どうしでもブレンドできるとのことで、知識として入れておきたくて、ブレンドモードを使った表現を色々と試してみました。

3Dのような表現

スマートフォン等の小さい画面ですと見切れてしまうので、大きな画面でご覧ください。対応しているブラウザも限定されますので、最新版のモダンブラウザでご覧ください。ただし、IEは最新の11も含め不可。未確認ですがMicrosoft Edgeではいけるようです。

「3Dのような表現」というのは少し大げさですが、それっぽい感じには見えますよね。上記は、色の違う3種類の画像を微妙にずらし、background-blend-modeのmultiply効果を与えて表現しています。この効果により、画像が重なっている部分の色が掛け合わされ、3種類の画像の色とは別の色が生成されているという仕組みになっています。

マウスホバーでそれぞれの画像が分離するようにしていますので、一枚の画像ではないことが分かると思います。
※モニターによっては、こちらが意図しているように見えていないかもしれません。個人差もあるかも。

フォントだったり、画像の位置を微妙にずらすだけで、結構見え方が変わるので、その辺りをいじればもっといい感じになるかもしれません。

色は、シアン、マゼンタ、イエローの3色で、カラーコードは以下の通り。

• シアン：#00aeef　■
• マゼンタ：#ec008c　■
• イエロー：#fff100　■

3色を掛け合わせて黒(または白)ができれば、上記以外でもそれっぽく見えると思いますが、そのへんはよく分かりません。。。

コードとか

背景画像に複数の画像を設定して、ブレンドの効果を与えているだけなので、やっていることはとても単純です。画像はPhotoshopとかで作る必要があるので、それだけは別で用意します。

HTML

<div class="blend-test"></div>

背景画像を設定するので、HTMLは適当です。

CSS

.blend-test {
    width: 100%;
    height: 150px;
    background-image: url(/*画像URL1*/), url(/*画像URL2*/), url(/*画像URL3*/);
    background-position: 0px 0px, 11px 0px, 6px 5px;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
}

幅や高さは適当に。background-imageに複数の画像を指定して、background-positionでそれぞれの位置を設定します。background-blend-modeにmultiplyを指定すれば複数画像の色が掛け合わされます。

HTMLのテキストでやる場合

これ知らなかったのですが、mix-blend-modeというプロパティがあって、テキストのような通常の要素にもブレンドの効果を与えることができるようなんですよね。ということで、通常のHTMLテキストでもやってみました。

THE ORTHODOX WORKS

基本は、background-blend-modeと同じみたいです。上記、マウスホバーでテキストが分離します。以下でやり方を記載してます。

コードとか

やり方は特に難しいことはなくて、background-blend-modeと同じように、mix-blend-modeにmultiplyをあててあげるだけです。

HTML

<p class="blend-text" data-text="THE ORTHODOX WORKS">THE ORTHODOX WORKS</p>

疑似要素に対してもブレンドの効果を反映させることができるので、データ属性を使えば、テキストは１つだけで大丈夫です。

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700italic);

.blend-text {
    position: relative;
    width: 100%;
    height: 100px;
    font-size: 50px;
    font-style: italic;
    font-family: 'Open Sans', sans-serif;
    color: #fff100;
    mix-blend-mode: multiply;
}

.blend-text::after {
    content: attr(data-text);
    position: absolute;
    top: 5px;
    left: 6px;
    color: #ec008c;
    mix-blend-mode: multiply;
}

.blend-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 11px;
    color: #00aeef;
    mix-blend-mode: multiply;
}

どのような環境でも大丈夫なように、フォントはWebフォントを使うなどした方がいいでしょう。疑似要素それぞれに、データ属性をcontentのアトリビュートで指定して、HTMLで設定したテキストを使い回します。mix-blend-mode:multiply;の指定は、それぞれに必要になります。

画像を用意するよりもずっと楽にできますし、文字列も自由に決めることができるので、今回のような場合はmix-blend-modeでやるのが良さそうです。

ブレンドモードについて

以下、ブレンドモードについての覚書です。

• ブレンドは同一の要素内でのみ有効で、他の階層や兄弟要素にある場合はブレンドさせることができない
• ブレンドモードは、ノーマルも含めて以下16種類ある ※はSafari非対応
  • normal 効果なし
  • multiply 乗算
  • screen スクリーン
  • overlay オーバーレイ
  • darken 比較（暗）
  • lighten 比較（明）
  • color-dodge 覆い焼き（カラー）
  • color-burn 焼き込み（カラー）
  • hard-light ハードライト
  • soft-light ソフトライト
  • difference 差の絶対値
  • exclusion 除外
  • hue 色相 ※
  • saturation 彩度 ※
  • color カラー ※
  • luminosity 輝度 ※
• IEは全てのバージョンで非対応

何か間違っていたらご指摘ください。

おわり

思いつきでやってみたものの、使いどころはなさそうですね、これ。

参考にさせて頂いたサイト

CSSブレンドモードで画像を彩ろう | Webクリエイターボックス
background-blend-mode プロパティで背景をブレンドしてみよう | WWW WATCH