CSS ポッドキャスト - 024: ブレンドモード
Duotone は写真で人気のある色処理であり、1 つはハイライト用、もう 1 つは暗い色用の対照的な 2 つの色のみで画像が構成されているように見せます。しかし、CSS ではどのようにしてこれを行っているのでしょうか。
ブレンドモードや、すでに学んだその他の手法（フィルタ、疑似要素など）を使用すると、どの画像にもこの効果を適用できます。
ブレンドモードとは
ブレンドモードは、Photoshop などのデザインツールで一般的に使用され、2 つ以上のレイヤの色を混ぜて合成効果を作成します。色の組み合わせを変更することで、非常に興味深い視覚効果を実現できます。 ブレンドモードをユーティリティとして使用することもできます。たとえば、背景が白い画像を分離して、透明な背景を持つように見せることができます。
デザインツールで使用可能なブレンドモードのほとんどは、CSS を使って使用できます。使用するには、mix-blend-mode プロパティまたは background-blend-mode プロパティを使用します。mix-blend-mode は要素全体にブレンディングを適用し、background-blend-mode は要素の背景にブレンディングを適用します。
1 つの要素に複数の背景があり、その背景をすべて互いに溶け込ませるには、background-blend-mode を使用します。
mix-blend-mode は、疑似要素を含む要素全体に影響します。
ユースケースの 1 つがデュオトーン画像の最初の例です。この画像では、疑似要素を介して要素にカラーレイヤが適用されます。
ブレンドモードは、分離可能と分離不可の 2 つのカテゴリに分類されます。分離可能なブレンドモードでは、RGB などの各色成分が個別に考慮されます。非分離ブレンドモードでは、すべての色コンポーネントが均等に考慮されます。
ブラウザの互換性
mix-blend-mode
background-blend-mode
分離可能なブレンドモード
標準
これはデフォルトのブレンドモードです。要素が他の要素とどのようにブレンドされるかについては、何も変更されません。
多層
multiply ブレンドモードは、複数の透明度を重ね合わせるようなものです。白のピクセルは透明で、黒いピクセルは黒で見えます。中間にある値は輝度（light）の値を乗算します。
つまり、ライトは大幅に明るく、暗く、暗くなります。ほとんどの場合、結果は暗くなります。
.my-element {
mix-blend-mode: multiply;
}
画面
screen を使用すると、light 値が乗算されます（multiply とは逆の効果）。ほとんどの場合、より明るい結果が得られます。
.my-element {
mix-blend-mode: screen;
}
オーバーレイ
このブレンドモード（overlay）は、multiply と screen を組み合わせたものです。ベースのダークカラーは暗くなり、ベースライトの色は明るくなります。50% グレーなど、中間色の色は影響を受けません。
.my-element {
mix-blend-mode: overlay;
}
暗くして
darken ブレンドモードでは、ソース画像と背景画像の暗い色の明度を比較し、その 2 つのうち最も暗いものを選択します。これは、各カラーチャネルの明度ではなく RGB 値を比較することで行われます（multiply や screen など）。darken と lighten では、多くの場合、この比較プロセスから新しい色値が作成されます。
.my-element {
mix-blend-mode: darken;
}
明る
lighten を使用すると、darken とはまったく逆の処理が行われます。
.my-element {
mix-blend-mode: lighten;
}
ドッジ色
color-dodge を使用すると、ソースカラーを反映するために背景色が明るくなります。このモードでは、真の黒色は効果を持ちません。
.my-element {
mix-blend-mode: color-dodge;
}
焼き付きカラー
color-burn ブレンドモードは multiply ブレンドモードとよく似ていますが、コントラストが強まるため、中間調の彩度が高くなります。
.my-element {
mix-blend-mode: color-burn;
}
ハードライト
hard-light を使用すると、鮮やかなコントラストを作成できます。
このブレンドモードでは、輝度値をスクリーンまたは乗算します。
ピクセル値が 50% グレーより明るい場合、あたかもスクリーンで処理されたかのように画像が明るくなります。暗くなれば 2 倍になります。
.my-element {
mix-blend-mode: hard-light;
}
ソフトライト
soft-light ブレンドモードは、overlay のそれほど厳しくないバージョンです。コントラストが少なくて同じように機能します。
.my-element {
mix-blend-mode: soft-light;
}
差異
difference の仕組みをわかりやすく説明するには、フォトネガティブの仕組みと少し似ています。difference ブレンドモードでは、各ピクセルの差分値を受け取り、明るい色を反転します。色の値が同じ場合は黒になります。
値の差異が反転します。
.my-element {
mix-blend-mode: difference;
}
除外対象
exclusion を使用する方法は difference とよく似ていますが、同じピクセルに対して黒を返すのではなく 50% のグレーを返すので、コントラストが少なく、よりソフトな出力になります。
.my-element {
mix-blend-mode: exclusion;
}
分離不可のブレンドモード
ブレンドモードは、HSL の色コンポーネントと考えることができます。各メソッドは、アクティブ レイヤから特定のコンポーネント値を取得し、他のコンポーネント値と混合します。
Hue
hue ブレンドモードでは、ソースカラーの色相を取得し、背景色の彩度と明度に適用します。
.my-element {
mix-blend-mode: hue;
}
飽和度
これは hue と同様に機能しますが、ブレンドモードとして saturation を使用すると、ソースカラーの彩度が背景色の色相と明度に適用されます。
.my-element {
mix-blend-mode: saturation;
}
色
color ブレンドモードでは、ソースカラーの色相と彩度、および背景の色の明度から色が作成されます。
.my-element {
mix-blend-mode: color;
}
光度
最後に、luminosity は color の逆数です。ソースカラーの明度と背景カラーの色相と彩度を使用して色を作成します。
.my-element {
mix-blend-mode: luminosity;
}
isolation プロパティ
isolation プロパティの値を isolate に設定すると、新しいスタッキング コンテキストが作成され、背景レイヤとブレンドされなくなります。Z-Index モジュールで学習したように、新しいスタッキング コンテキストを作成すると、そのレイヤがベースレイヤになります。つまり、親レベルのブレンドモードは適用されなくなりますが、isolation: isolate が設定されている要素内の要素は引き続きブレンドできます。
バックグラウンド プロパティがすでに分離されているため、background-blend-mode では機能しません。
理解度チェック
ブレンドモードに関する知識をテストする
CSS ブレンドモードは次のうちどれですか。
異なる色をさまざまな方法でブレンドする場合、どのスタイルのブレンドモードが必要ですか。