The CSS Podcast - 024: ブレンドモード
デュオトーンは、ハイライトとシャドウの 2 色のみで構成されているように見えるように画像を加工する、写真でよく使用されるカラー処理です。CSS でこれを実現するにはどうすればよいですか?
ブレンドモードと、フィルタや疑似要素など、これまで学習した他の手法を使用して、この効果を任意の画像に適用できます。
ブレンドモードとは
ブレンドモードは、Photoshop などのデザインツールでよく使用され、2 つ以上のレイヤの色を混ぜて合成効果を作成します。色の混合方法を変更することで、非常に興味深い視覚効果を実現できます。背景が白の画像を切り抜いて背景を透明に見せるなど、ユーティリティとしてブレンドモードを使用することもできます。
デザインツールで使用できるほとんどのブレンドモードは、mix-blend-mode
プロパティまたは background-blend-mode
プロパティを使用して CSS で使用できます。mix-blend-mode
は要素全体にブレンドを適用し、background-blend-mode
は要素の背景にブレンドを適用します。
background-blend-mode
は、要素に複数の背景があり、それらをすべて相互にブレンドする場合に使用します。
mix-blend-mode
は、疑似要素を含む要素全体に影響します。たとえば、最初の例の duotone 画像では、疑似要素を使用して要素にカラーレイヤを適用しています。
ブレンドモードは、可分と不可分の 2 つのカテゴリに分類されます。分離可能なブレンドモードでは、RGB などの各色成分が個別に考慮されます。非分離ブレンドモードでは、すべての色成分が同等に考慮されます。
ブラウザの互換性
mix-blend-mode
background-blend-mode
分離可能なブレンドモード
標準
これはデフォルトのブレンド モードであり、要素同士のブレンド方法は変更されません。
乗算
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 つのうち最も暗い色を選択します。これは、各色チャネルについて、明るさではなく 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% グレーより明るい場合、画像はスクリーン処理されたように明るくなります。暗い場合は乗算されます。
.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
プロパティ
isolation
プロパティの値を isolate
に設定すると、新しいスタッキング コンテキストが作成され、背景レイヤとブレンドされなくなります。z-index モジュールで学んだように、新しいスタッキング コンテキストを作成すると、そのレイヤがベースレイヤになります。つまり、親レベルのブレンド モードは適用されなくなりますが、isolation: isolate
が設定された要素内の要素は引き続きブレンドできます。
background プロパティはすでに分離されているため、background-blend-mode
では機能しません。
理解度を確認する
ブレンドモードに関する知識をテストする
次のうち、CSS のブレンドモードはどれですか。
異なる色を異なる方法でブレンドする場合、どのスタイルのブレンドモードが必要ですか。