【CSS】CSSだけで背景色に合わせて文字の色を変化させるブレンドモードという方法【mix-blend-mode】

みなさんは固定のグローバルナビ等で、背景が白の時のフォントは黒で、黒背景では白いフォントになるのを見たことありませんか？
実はあれ、CSSを１行追加するだけで実装出来るんです。
今回はmix-blend-modoというプロパティの紹介です。

mix-blend-modeの優秀なところは、例えば黒背景なら白文字、白背景なら黒文字という変化を、自動的にしかも文字全体が切り替わるのではなく、色が重なっている部分だけを変化させられることです。

この記事の目次

  1. ブレンドモード/mix-blend-modeとは
  2. ブレンドモードの使用例

ブレンドモード/mix-blend-modeとは

ブレンドモードとは、背景色に合わせて上に重なるオブジェクトの色をさまざまな効果で表示させる方法です。
Photoshop等のAdobe製品を使った事がある方には馴染みがあると思いますが、レイヤーを重ねた時の描画モードの変更をCSSでやってしまうのがmix-blend-modeです。
実際にデモページで表示の仕方を確認してみてください。

DEMO

ブレンドモードの使用例

ブレンドモードの効果は下記のW3Cのドラフトで確認できます。
W3C Editor’s Draft 英語サイト

効果はたくさんあるのですが、使い勝手が良いのは
defference
screen
soft-light
あたりだと思います。
固定ナビゲーションに使う場合や、画像の上に乗せるだけの場合等、使い方によって色々試してみてください。

黒背景 / #333

フォントの色は白を設定しています。
mix-blend-modeの値をnormalにするとブレンドしていないという事になります。
なので黒背景では以下のように見えます。
ツイッターのアイコンは白色のpngで値はsoft-lightに設定しています。

h1 {mix-blend-mode:normal;}
h2 {mix-blend-mode:difference;}
h3 {mix-blend-mode:overlay;}
h4 {mix-blend-mode:exclusion;}
h5 {mix-blend-mode:screen;}
img {mix-blend-mode:soft-light;}

白背景 / #fff

normalはもちろん白なので見えなくなりますが、diffelenceやexclusionのような反対の色を強く出す値を設定すると黒く見えます。
ですが、逆にフォントを黒に設定しても白背景では効果が無いのでフォントを白に設定しているという訳です。
DEMOではoverlayやscreenも見えなくなっています。

画像の上に乗せると以下のようになります。

対応ブラウザ

IE意外は使えます！IE意外は！

© GOKAN DESIGN STUDIO