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

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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  MySQL ストアド プロシージャのクエリ コマンドの概要

>>:  VMware vCenter の不正な任意ファイルアップロードの脆弱性 (CVE-2021-21972) について

推薦する

Docker ベースの Jenkins のデプロイに関する詳細なチュートリアル

このドキュメントを作成した当時は2019年12月頃で、er2.200が最新バージョンでした。 1.画...

Reactは無限ループスクロール情報を実装する

この記事では、無限ループスクロールを実現するためのReactの具体的なコードを参考までに紹介します。...

Vueはログイン認証コードを実装する

この記事では、ログイン認証コードを実装するためのvueの具体的なコードを例として紹介します。具体的な...

Linux resolv.conf の簡単な分析

1. はじめにresolv.conf は、さまざまなオペレーティング システムのドメイン ネーム シ...

nginxとlvsのメリットとデメリット、そして適切な使用環境

まず最初に、ロード バランシングとは何かについて説明します。ロード バランシングとは、リクエストの内...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...

jsはシンプルな英語-中国語辞書を実装します

この記事では、参考までに、簡単な英中辞典を実装するためのjsの具体的なコードを紹介します。具体的な内...

Dockerコンテナを停止または強制終了できない問題の解決策

Docker バージョン 1.13.1問題プロセス特定の環境のMySQLコンテナを停止、強制終了、ま...

Ajax リクエストにおけるクロスドメイン問題の原因と解決策

目次1. クロスドメインはどのように形成されるのでしょうか? 2. クロスドメインの根本的な原因3....

HTTPS の有効化に関する経験の共有

国内のネットワーク環境が悪化し続ける中、さまざまな改ざんや乗っ取りが後を絶たず、サイト全体をHTTP...

docker-maven-pluginはイメージをパッケージ化し、プライベートウェアハウスにアップロードします。

目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....

Vue ライフサイクルの紹介とフック関数の詳細な説明

目次Vueライフサイクルの紹介とフック機能VUEライフサイクルフックVue ライフサイクルの紹介作成...

Vueは小さな検索機能を実装する

この記事の例では、検索機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な...

CSS スタイルで一般的なグラフィック効果を示すサンプルコード

一般的な基本グラフィックと私が遭遇するいくつかの小さなアイコンについて簡単に説明します。以下は CS...

js でシンプルなタブを実装する

タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...