mix-blend-modeプロパティ

CSS mix-blend-mode

個人的にはあまり使うことのないプロパティですが、知っていて損はないmix-blend-modeプロパティについてまとめておきます。

mix-blend-modeは、2つの要素が重なり合ったとき色をどのように表示するかを指定します。ちなみにIE非対応です

2つの色の重ね方

要素の重なりという固い言い方をしましたが特別なものではなく、たとえば背景色(画像)をもつブロックの中にあるテキストや画像。positionを使って重ねた2つの要素など、よくあるものです。

通常であれば、後にある要素や子要素が上に重なり下の背景は見えなくなります。下の例のような感じです。

これを合成、乗算、減算など色々処理して表示方法を変えるのがmix-blend-modeの働きです。値の種類が多いので、テキストにそれぞれ指定したのが次のサンプルです。

「NORMAL」がmix-blend-modeを指定していない文字色です。真ん中のサンプルでnormalが見えない理由は不明です。コードは存在しているのになぜか表示されません。

See the Pen blend-mode by Takashi Abe (@TakeshiAbe) on CodePen.

以下、mozillaの説明を自己解釈したものです。

multiply

下の色と上の色の掛け合わせになる。白色は変化をもたらさない。表示される色は黒に近づく。

screen

上の色を反転して下の色と乗算し、さらに反転させた色になる。2つの色を重ねてスクリーン投影したものに似ている。表示される色は白に近づく。

overlay

「下の色が暗ければmultiply、明るければscreenになる」と説明があるものの、上のサンプル見るとそうでもない。とりあえず、下の色にあわせて変化する。

darken

色成分のうち「最も暗い色」になる。

lighten

色成分のうち「最も明るい色」になる。

color-dodge

上の色を反転し、下の色を除算した色になる。上の色が黒だと仕事しない。色は白に近づく。

color-burn

下の色を反転し、上の色で除算した色になる。下の色が白だと仕事しない。色は黒に近づく。

hard-light

後ろから強いスポットライトをあてたような色になる。

soft-light

後ろから弱めのスポットライトをあてた色になる。

difference

2つの色のうち、暗い方の色を取り除く。黒色レイヤーでは仕事しない。白色レイヤーのときは、もう片方のレイヤーの色を反転させる。

exclusion

differenceよりコントラスト弱め

hue

上の色の色調で、彩度と明度は下の色。

saturation

上の色の彩度で、色調と明度は下の色。

color

上の色の色調と彩度で、明度だけ下の色。

luminosity

下の色の色調と彩度で、明度だけ上の色。

mix-blend-modeとisolation

mix-blend-modeと対で覚えておくと良いのが「isolation」プロパティ。値には「auto」「isolate」のいずれかをとります。

名前の通りで、isolation: isolate; を指定した要素は、重ね合わせから孤立したコンテンツになるのでmix-blend-modeの影響を受けなくなります

darkmode.js

ダークモードを実装できるスクリプトである「darkmode.js」にもmix-blend-modeが使われています。darkmode.jsにもいくつかエラー報告があるようですが、isolation: isolate を知っていれば自身で修正できることもあります。覚えておきましょう。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]