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
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
background-blend-mode
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
プロパティ
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
isolation
を設定した場合
プロパティを isolate
に設定し、
新しいスタック コンテキストが作成され、
背景レイヤとのブレンドを防ぐことができます。
Z-Index モジュールで説明したように、新しいスタック コンテキストを作成する際は、
そのレイヤがベースレイヤになります。
親レベルのブレンドモードは適用されなくなり
ただし、isolation: isolate
が設定された要素内の要素は、引き続きブレンドできます。
これは background-blend-mode
では機能しないことに注意してください。
背景プロパティがすでに分離されているためです。
理解度をチェックする
ブレンドモードに関する知識をテストする
CSS ブレンドモードは次のうちどれですか。
異なる色を異なる方法でブレンドする場合、どのスタイルのブレンドモードが必要ですか。