BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[css3]グレーモードやブラックモードを実現するCSS3フィルター（フィルター）サンプルコード（Webページ用

2022-01-12 01:58:56

フロントエンド

css3,filterの実装は、Webのグレー効果を実現するだけでなく、ブラックモード効果の実現も支援することができます。それでは、実装方法を見ていきましょう

フィルタープロパティの紹介 

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

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

サイトグレイ効果

このエフェクトブログは、cssによくあるエフェクトのまとめができた当初に書かれたものです。

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

そのコードは以下の通りです。 

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

グレーの効果に比べ、ブラックモードはちょっと難しい！？

ブラックモード判定

純粋なウェブの場合、prefers-color-scheme クエリ文はモダンブラウザのもとで使用することができます。

構文は以下の通りです。

no-preference どの配色を使うかは、システムから指示されない。
/{br light システムが明るい色のテーマを使用することを好むことを示す。
dark システムが暗いテーマを好むことを示す。

例 

html {
   filter: grayscale(100%);//IE
  -webkit-filter: grayscale(100%);//Google Chrome
  -moz-filter: grayscale(100%);//firefox
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);//Google Chrome
}

JavaScript コードでシステムのシェード テーマの判定を行う必要がある場合は、ネイティブの window.matchMedia() メソッドを使用できます (例)。 

{{コード

ダークモードコード 

{{コード

この後、画像が反転して見づらくなります 

/* Dark color scheme */
@media (prefers-color-scheme: dark) {
    body { background: #333; color: white; }
}
/* Light color scheme */
@media (prefers-color-scheme: light) { body { background: white; color: white; } /* light mode */ @media (prefers-color-scheme: light)
    body { background: white; color: #333; }
}

画像に別のレイヤーを追加し、純粋な画像が動作するように、正しいものを得るために逆を反転させる

つまり、マージは次のように設定することができます。 

// Whether dark mode is supported
// Returns true or false
window.matchMedia("(prefers-color-scheme: dark)").matches;

しかし、背景画像では、黒の濃淡が問題となり、背景画像については、以下のように設定することができます。 

html {
    filter: invert(1) hue-rotate(.5turn);
}

質問

上記の設定は明るい背景の場合のみで、背景なしや透明な背景は機能しません。

また、スタイルごとに特殊な処理を行う必要があります。例えば、黒モードに完全に合わせるために、filterなどでグローバル変数を行う。例えば、以下のような感じです。 

img {
    filter: invert(1) hue-rotate(.5turn);
}

この記事は、CSS3フィルタ（フィルタ）は、Webページのグレーまたはブラックモードのサンプルコードを達成するために、このに導入され、より関連するCSS3フィルタの内容は、以前の記事のスクリプトのホームを検索してくださいまたは次の関連記事を閲覧を継続、私はあなたが将来的には、スクリプトの家をサポートしてほしいです

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します