フロントエンド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 クエリ ステートメントを使用できます。 構文は次のとおりです。
例えば: /* ダークモード */ @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 をよろしくお願いいたします。 |
2011 年に最も顕著なウェブサイトの変更は、一連の製品に新しいユーザー インターフェースを導入した...
環境準備: VMware+CentOS、jdk 1. システムディスクのサイズを確認する1. コマン...
この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...
公式チュートリアルに従って、インストール パッケージをダウンロードし、[インストール] をクリックし...
面接では、次のようなシナリオを経験する必要があります。インタビュアー: 「MySQL を使用したこと...
序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...
ユーザーグループLinux では、すべてのユーザーはグループに属する必要があり、Linux には次の...
この記事の例では、カウントダウン機能を実装するためのVueの具体的なコードを参考までに共有しています...
ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...
1. pipとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンイ...
MySQL Binログデータの回復: 誤ってデータベースを削除した場合前書き: テスト マシンで誤っ...
目次js のイベントイベントタイプ一般的なイベントイベント登録静的および動的登録の例onload 読...
クールなフロントエンドページのランダムQRコード検証を参考までに共有します。具体的な内容は次のとおり...
最近、MySQL を使用してテーブル データを Excel ファイルにエクスポートしました。MySQ...
目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...