CSS 前景と背景の自動カラーマッチング技術の紹介 (デモ)

1. カラーマッチング効果のプレビュー

下の GIF に示すように、ボタンの背景色が徐々に薄くなると、テキストの色も白から黒に変わり、境界線も表示されます。色の変換は、純粋に CSS で実現されています。

こちらをクリックしてください: ボタンのテキストと境界線の色が背景色に合わせて自動的に変わるデモ

R、G、B の対応するスライダーをドラッグすると、ボタンのテキストの色と境界線の色が背景色に応じて自動的に変化することがわかります。具体的な症状は次のとおりです。

• 暗い背景では、テキストは境界線のない白になります。
• 明るい背景では、周囲の環境と区別しやすいように、テキストは黒で、境界線は暗くなっています。

このスマート マッチングは、主に CSS3 calc() 計算と CSS3 ネイティブ var 変数を使用して、純粋な CSS で実装されています。

2. カラーコード表示

HTML コードは次の通り非常にシンプルです。

<button class="btn">私はボタンです</button>

重要なポイントと難点は CSS 部分にあります。

：根 {
  /* RGB変数を定義する */
  --赤: 44;
  --緑: 135;
  --青: 255;
  /* テキストの色変更の臨界値。0.5～0.6 が推奨されます */
  --しきい値: 0.5;
  /* 暗い境界線が表示されるしきい値。0 から 1 の範囲で、0.8 以上が推奨されます */
  --境界しきい値: 0.8;
}

.btn{
  /* ボタンの背景色は基本背景色です */
  背景: rgb(var(--red), var(--green), var(--blue));

  /** 
   * sRGB Luma方式を使用してグレースケールを計算します（明るさとして表示されます）
   * アルゴリズムは次のとおりです。
   * 明度 = (赤 * 0.2126 + 緑 * 0.7152 + 青 * 0.0722) / 255
  */
  --r: calc(var(--red) * 0.2126);
  --g: calc(var(--green) * 0.7152);
  --b: calc(var(--blue) * 0.0722);
  --sum: calc(var(--r) + var(--g) + var(--b));
  --lightness: calc(var(--sum) / 255);
  
  /* 色を設定する */
  色: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
 
  /* 境界の透明度を決定する */
  --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
  /* 境界線関連のスタイルを設定する */
  境界線: .2em 実線;
  境界線の色: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
}

一見すると、アヒルが雷鳴を聞くようなもので、意味がわかりません。実際、複雑ではありません。実装原理を分析してみましょう。

3. 前景と背景の自動カラーマッチングの原理

1. CSSプロパティ値範囲オーバーフロー境界レンダリング機能

CSS 言語には興味深い機能があります。つまり、CSS プロパティ値が通常の範囲を超えた場合、形式が正しい限りレンダリングされ、レンダリングされた値は有効な境界値になります。

ここに 2 つの例を示します。

不透明度属性値の有効な範囲は 0 ～ 1 ですが、負の数または非常に大きな値を設定した場合、ブラウザーはそれを解釈しますが、次のように 0 または 1 のいずれかになります。

。例 {
  不透明度: -2; /* 0 に解決され、完全に透明になります*/
  不透明度: -1; /* 0 に解決され、完全に透明になります*/
  opacity: 2; /* 1 として解析され、完全に不透明になります */
  opacity: 100; /* 1 として解析され、完全に不透明になります */
}

HSL、S、L などのカラー値の範囲は 0% ～ 100% です。ただし、負の数または最大値を設定した場合、ブラウザーはそれを解釈できますが、以下に示すように 0% または 100% のいずれかになります。

。例 {
  color: hsl(0, 0%, -100%); /* hsl(0, 0%, 0%)、black として解析します*/
  color: hsl(0, 0%, 200%); /* hsl(0, 0%, 100%)、white として解析します*/
}

この記事のカラー マッチング手法では、この境界レンダリング機能を活用します。

2. var変数は複雑な計算を実行するためにcalcに渡されます

CSS コードを上から下まで分析してみましょう。

まず、:root セレクター (意味的にはグローバル) にいくつかのグローバル CSS 変数を定義します。

：根 {
  --赤: 44;
  --緑: 135;
  --青: 255;

  --しきい値: 0.5;
  --境界しきい値: 0.8;
}

で：

-しきい値
これは、現在の RGB カラー値の明るさを比較するために使用される色変更しきい値です。
--境界しきい値
これは境界色の透明度の臨界値であり、現在の RGB カラー値との明るさの比較でもあります。
次に、.btn{} 内の CSS コード:

背景: rgb(var(--red), var(--green), var(--blue));

これは分かりやすく、基本的な RGB カラー値が背景色として使用されます。

--r: calc(var(--red) * 0.2126);
--g: calc(var(--green) * 0.7152);
--b: calc(var(--blue) * 0.0722);
--sum: calc(var(--r) + var(--g) + var(--b));
--lightness: calc(var(--sum) / 255);

ここには 5 行に 5 つの CSS 変数があります。実際に必要なのは最後の lightness で、これは現在の背景色の明るさを計算するものです。 sRGB Lumaグレースケールアルゴリズム①を使用します。なぜ5行必要なのでしょうか？計算式は次のようになります。

明度 = (赤 * 0.2126 + 緑 * 0.7152 + 青 * 0.0722) / 255

このうち、R、G、B のカラー値を乗算する係数は固定されており、グレースケール アルゴリズムごとに係数が異なります。 --lightness は明るさを示し、範囲は 0 から 1 です。このとき、--threshold と --border-threshold の 2 つの臨界値と比較して、ボタンのテキストの色と境界の透明度を決定できます。

①ここでのグレースケールは明るさとみなすことができます。実際、HSLの明るさの計算方法は、R、G、Bの最大と最小の色値の合計の半分になるはずです。

色: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%))

色を設定するための CSS コード。

ここでの計算は中国語に翻訳すると、(輝度値 - 臨界値) * 比例係数となります。

明るさの値の範囲は 0 ～ 1 で、臨界値は 0.5 に固定されているため、次のようになります。

明るさの値が 0.5 未満の場合、明るさの値から臨界値を引いた値は負になります。比例係数は非常に大きな負の数なので、負の数を負の数で掛けると正の数になり、非常に大きな正の数になります。境界レンダリングの原則に従って、100% でレンダリングされるため、色は白になります。
輝度値が 0.5 より大きい場合、輝度値から臨界値を引いた値は正になります。比例係数が非常に大きな負の数であるため、非常に大きな負の数が得られます。境界レンダリングの原則に従って、0% でレンダリングされるため、色は黒になります。
上記は、ボタンのテキストの色が、色が変わる背景では黒に、暗い背景では白に変わる原理です。

--border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);

境界の透明性も同様の原理で機能します。ここでの計算は中国語に翻訳すると次のようになります: (明るさの値 - 境界しきい値) * 100。

明るさの値の範囲は 0 ～ 1 で、境界しきい値は 0.8 に固定されているため、次のようになります。

明るさの値が 0.8 未満の場合、明るさの値から境界しきい値を引いた値は負になります。CSS では、負の透明度は 0 としてレンダリングされ、境界は完全に透明になります。

明るさの値が 0.8 より大きい場合、明るさの値から境界しきい値を引いた値は正となり、計算された透明度の値は 0 から 20 の範囲になります。もちろん、透明度の値が 1 より大きい場合は 1 としてレンダリングされます。このとき、境界は基本的に完全に不透明になり、暗い境界が表示されます。

境界線: .2em 実線;
境界線の色: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));

境界線のスタイルを設定すると、境界線の色は背景色より 50 単位暗くなり (負の数は 0 としてレンダリングされます)、透明度は明るさに基づいて動的に計算されます。暗い背景では、ボタンの境界線の透明度は 0 で表示されません。明るい背景では、透明度は 0 ～ 1 の範囲で表示されます。色が明るいほど、境界線の透明度が高くなり、境界線の色は暗くなります。これは、色の一致の期待値と一致します。

上記の分析の後、誰もがその実装の原理を理解できると信じています。

ボタンの背景色を変更する

.btn クラス名の下の CSS コードは固定です。ボタンの色を変更する必要がある場合は、.btn の下の CSS を変更するのではなく、:root 内の次の 3 つの変数値を変更します。

--赤: 44;
--緑: 135;
--青: 255;

CSS 設定は値を直接変更します。JS で設定する場合は、setProperty() メソッドを使用します。わからない場合は、こちらの記事を参照してください: 「HTML タグと JS で CSS3 var 変数を設定する方法」。

IV. 最後のコメント

var の互換性の制限により、この非常に興味深い CSS テクニックは、大規模な外部プロジェクトでの使用にはまだ適していません。

カーネル環境は比較的固定されているので、アプレットを試してみることができます。内部システムや実験的なプロジェクトを実際に試すことができ、非常に興味深いものになるでしょう。

このカラー マッチング テクニックは、実際にはボタンだけでなく、いくつかの大きな領域のレイアウトにも使用できます。これらのレイアウトの背景色は動的になる可能性があるためです。このとき、テキストのカラー マッチングも CSS の助けを借りて自動化できます。

また、この記事のデモではボタンのテキストは白黒になっています。実際には、乗算係数が小さければ小さいほど、より多くの色の値が表示され、色のマッチングがより洗練されます。

参考文献

フォントの色を切り替える…CSS

要約する

以上がエディターが導入したCSS前景と背景の自動カラーマッチング技術の簡単な紹介です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。