ブレンドモード

CSS ポッドキャスト - 024: 統合モード

Duotone は、写真撮影で人気のあるカラー処理です これにより、2 つのコントラストの強い色のみで構成された画像になります。 1 つはハイライト用、もう 1 つはローライト用です。 しかし、これを 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 つのカテゴリに分類されます。 分離可能なブレンドモードでは各色要素が考慮されます 個別に設定できます 非分離ブレンドモードでは、すべての色成分が均等に考慮されます。

ブラウザの互換性

mix-blend-mode

対応ブラウザ

  • Chrome: 41。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 32。 <ph type="x-smartling-placeholder">
  • Safari: 8. <ph type="x-smartling-placeholder">

ソース

background-blend-mode

対応ブラウザ

  • Chrome: 35。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 30。 <ph type="x-smartling-placeholder">
  • Safari: 8. <ph type="x-smartling-placeholder">

ソース

分離可能なブレンドモード

標準

これはデフォルトのブレンドモードであり、要素が他の要素とどのようにブレンドされるかには影響しません。

乗算

multiply ブレンドモードは、複数の透明度を重ねるようなものです。 白のピクセルは透明に見えますが、 黒のピクセルは黒く表示されます。 中間にあるものがあれば、その輝度（光）の値が乗算されます。 つまり、照明はかなり明暗が明るくなり、 通常はより暗くなります。

.my-element {
  mix-blend-mode: multiply;
}

画面

screen を使用すると、光の値が乗算されます。これは multiply の逆効果です。 ほとんどの場合、より明るい結果が得られます。

.my-element {
  mix-blend-mode: screen;
}

オーバーレイ

このブレンドモード（overlay）は、multiply と screen を組み合わせたものです。 ベースライトの色が暗くなり、ベースライトの色が明るくなります。 中間の色（50% グレーなど）は影響を受けません。

.my-element {
  mix-blend-mode: overlay;
}

暗くして

darken ブレンドモードでは、ソース画像と背景画像の暗い色の輝度を比較します。 2 つのうち最も暗いほうを選択します これは、（multiply や screen のように）輝度ではなく、RGB 値を比較することで行われます。 自動的に作成します。 darken と lighten を使用すると、多くの場合、この比較プロセスから新しい色の値が作成されます。

.my-element {
  mix-blend-mode: darken;
}

Lighten

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% グレーより明るい場合は、画像が明るくなり、 スクリーニングします。色が暗い場合は乗算されます。

.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 ブレンドモードはソースカラーの色相を使用します。 背景の色の彩度と明るさに適用します

.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 プロパティ

対応ブラウザ

  • Chrome: 41。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 36。 <ph type="x-smartling-placeholder">
  • Safari: 8. <ph type="x-smartling-placeholder">

ソース

isolation を設定した場合 プロパティを isolate に設定し、 新しいスタック コンテキストが作成され、 背景レイヤとのブレンドを防ぐことができます。 Z-Index モジュールで説明したように、新しいスタック コンテキストを作成する際は、 そのレイヤがベースレイヤになります。 親レベルのブレンドモードは適用されなくなり ただし、isolation: isolate が設定された要素内の要素は、引き続きブレンドできます。

これは background-blend-mode では機能しないことに注意してください。 背景プロパティがすでに分離されているためです。

理解度をチェックする

ブレンドモードに関する知識をテストする

CSS ブレンドモードは次のうちどれですか。

差異
🎉
Lighten
🎉
明るくする
もう一度考えてみましょう。
Dullen
もう一度考えてみましょう。
乗算
🎉
オーバーレイ
🎉

異なる色を異なる方法でブレンドする場合、どのスタイルのブレンドモードが必要ですか。

分離可能
カラーチャネル ターゲット効果を備えたブレンドモード
分離不可能
もう一度お試しください。分離不可はカラーチャネルを認識しません