CSS3 フィルター (フィルタ) ウェブページのグレーまたは黒モードのサンプルコードを実現

CSS3 フィルター (フィルタ) ウェブページのグレーまたは黒モードのサンプルコードを実現

フロントエンド

css3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モード効果の実現にも役立ちます。どのように実装するか見てみましょう!

フィルタプロパティの概要

フィルター: なし | ぼかし() | 明るさ() | コントラスト() | ドロップシャドウ() | グレースケール() | 色相回転() | 反転() | 不透明度() | 彩度() | セピア() | url();

ヒント: 複数のフィルターを区切るにはスペースを使用します。

ウェブサイトのグレー効果

このエフェクト ブログは、よく使用される CSS エフェクトをまとめているときに最初に作成されました。

以下のコードで簡単に実現できます!

コードは次のとおりです。

html{
   フィルター: グレースケール(100%); //IE ブラウザーの webkit フィルター: グレースケール(100%); //Google ブラウザーの moz フィルター: グレースケール(100%); //Firefox の ms フィルター: グレースケール(100%);
  -o-filter: グレースケール(100%);
  フィルター:progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
  -webkit-filter: grayscale(1); // Google Chrome}

グレー効果と比較すると、夜間モードを実現するのは少し難しいです。

ナイトモード判定

純粋な Web の場合は、最新のブラウザで prefers-color-scheme クエリ ステートメントを使用できます。

構文は次のとおりです。

非優先: システムは、使用する配色をユーザーに通知しません。
light は、システムが明るいテーマを優先することを示します。
dark は、システムがダークテーマを優先することを示します。

例えば:

/* ダークモード */
@media (優先カラースキーム: 暗い) {
    本文 { 背景: #333; 色: 白; }
}
/* ライトモード */
@media (優先カラースキーム: 明るい) {
    本文 { 背景: 白; 色: #333; }
}

JavaScript コードでシステムのダーク テーマまたはライト テーマを判別する必要がある場合は、ネイティブの window.matchMedia() メソッドを使用できます。次に例を示します。

// ダークモードをサポートするかどうか // true または false を返す
window.matchMedia("(prefers-color-scheme: dark)").matches;

ナイトモードコード

html{
    フィルター: invert(1) hue-rotate(.5turn);
}

その後、画像が反転してしまい、非常に醜いものになります。

画像 {
    フィルター: invert(1) hue-rotate(.5turn);
}

画像に別のレイヤーを追加すると、正しい向きになり、純粋な画像がうまくいきます

したがって、組み合わせは次のように設定できます。

html、画像 {
    フィルター: invert(1) hue-rotate(.5turn);
}
画像 {
    不透明度: .75;    
}

しかし、背景画像と黒い影に問題があります。背景画像については、次のように設定できます。

@media (優先カラースキーム: 暗い) {
    html、画像 { 
        フィルター: 反転(1) 色相回転(180度);
    }
   .bgフィルター{
    フィルター: 反転(1) 色相回転(180度);
  }
    .some-ele-box {
        ボックスシャドウ: なし;
    }
}

質問

上記の設定は明るい背景のみに適用され、背景なしまたは透明な背景では機能しません。

また、それぞれのスタイルごとに特別な加工が必要となります。たとえば、フィルターをグローバル変数として使用して、夜間モードに完全に一致させることができます。例えば:

@media (優先カラースキーム: 暗い) {
    html{
        フィルター:反転(1) 色相回転(180度)
    }

    .dark-img,img {
        フィルター: 反転(1) 色相回転(180度)
    }
   // 背景画像に対する特別な処理 // グローバルカラーに対する特別な処理 // background-color: var(--darkColor)
}

CSS3 フィルターを使用して Web ページにグレーまたは黒のモードを作成する方法についての記事はこれで終わりです。CSS3 フィルターの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  角度付き双方向バインディングの詳細な説明

>>:  ファイル操作のためのLinuxシステムコール

推薦する

MySQL ストレージ エンジン MyISAM と InnoDB の違いの概要

1. MySQLのデフォルトストレージエンジンの変更MySQL 5.1 より前のバージョンでは、デフ...

IDEA が Docker を統合してリモート展開を実現するための手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

MySQL パスワード変更方法の概要

MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...

LinuxシステムにTomcatをインストールし、サービスの起動とシャットダウンを構成する

Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....

LeetCode の SQL 実装 (181. 従業員は管理職よりも収入が高い)

[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...

MySQL ビッグデータ クエリ最適化エクスペリエンスの共有 (推奨)

本格的な MySQL 最適化! MySQL のデータ量が少ない場合は最適化は不要です。データ量が多い...

面接でよく聞かれる Vue 修飾子 13 個

目次1. 怠惰な2.トリム3.番号4.停止5. キャプチャ6.自分7.一度8.予防する9.ネイティブ...

固定テーブル幅テーブルレイアウト: 固定

テーブルを画面全体(残りの空白領域)に表示するために、幅属性は 100% と定義されることが多く、セ...

ドロップダウンボックス選択コンポーネントを実装するためのネイティブ js

この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考...

Vue のライフサイクルとフック関数

目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...

Dockerプライベートライブラリの実装

プライベート Docker レジストリのインストールとデプロイは、Docker テクノロジーを導入、...

HTML ページ スタイルの !-- -- の機能は何ですか?

主に低バージョンのブラウザ向け<!-- --> は HTML コメント タグです。上位バ...

Tudou.com フロントエンドの概要

1. 分業とプロセス<br />Tudou.comでは、プロジェクト開発が中核であり、誰...

Linux で tcpdump コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明

序文tcpdump はよく知られたコマンドライン パケット分析ツールです。 tcpdump コマンド...