CSS 曇りガラスのプロパティ最適化のヒント: フィルターと背景フィルター

CSS 曇りガラス属性の最適化スキル: フィルターと背景フィルター

現代の Web デザインでは、曇りガラス効果 (ブラー) が背景や背景に広く使用されています。一部のインターフェイス要素を画像に適用して、ぼやけた柔らかい視覚効果を提供します。これまですりガラス効果を実現するには、画像処理ソフトを使って画像をぼかし、そのぼかした画像を背景として使用するのが主流でした。ただし、この方法では追加の画像リソースが必要であり、ぼかし効果の程度を動的に調整することはできません。 CSS3 の開発により、追加の画像リソースを使用せずに、CSS プロパティを通じて動的なすりガラス効果を実現できます。

CSS プロパティのフィルターと背景フィルターを使用すると、すりガラス効果を実現でき、さまざまなシーンに適しています。 filter 属性は要素のコンテンツをフィルタリングするために使用され、backdrop-filter 属性は要素の背景をフィルタリングできます。以下では、これら 2 つのプロパティを詳しく紹介し、具体的なコード例を示します。

1. フィルター属性

フィルター属性は、テキストや画像などの要素のコンテンツに適用できる一般的なフィルターです。この属性を使用して、要素コンテンツに対するぼかし、明るさ調整、コントラスト調整、彩度調整、その他の効果を実現します。その中でも、ぼかし効果を使用すると、すりガラス効果を実現できます。

1. ぼかし効果

ぼかし効果を実現するには、filter 属性の値を Blur(value) に設定します。値はぼかしの程度を表します。一般に値の範囲は0～10pxで、値が大きいほどぼかしの度合いが高くなります。

.blur-effect {
  filter: blur(5px);
}

2. 明るさの調整

要素コンテンツの明るさを調整したい場合は、brightness(value) 属性を使用できます。このプロパティの値はパーセンテージであり、100% の値は元の明るさを表し、100% 未満の値は明るさの低下を表し、100% を超える値は明るさの増加を表します。

.brightness-effect {
  filter: brightness(80%);
}

3. コントラスト調整

要素コンテンツのコントラストを調整するには、contrast(value) 属性を使用できます。このプロパティの値もパーセンテージであり、100% の値は元のコントラストを表し、100% 未満の値はコントラストの低下を表し、100% を超える値はコントラストの増加を表します。

.contrast-effect {
  filter: contrast(150%);
}

4. 彩度の調整

要素のコンテンツの彩度を調整するには、saturate(value) 属性を使用できます。このプロパティの値もパーセンテージであり、100% の値は元の彩度を示し、100% 未満の値は彩度の低下を示し、100% を超える値は彩度の増加を示します。

.saturation-effect {
  filter: saturate(200%);
}

2. Background-filter 属性

background-filter 属性は CSS3 の新機能で、要素のコンテンツではなく要素の背景に適用できます。この属性は、要素の背景にぼかし、明るさ調整、コントラスト調整、彩度調整などの効果を与える場合に使用し、すりガラス効果を得るのにも適しています。

1. ぼかし効果

背景のぼかし効果を実現するには、backdrop-filter 属性の値を Blur(value) に設定します。

.backdrop-blur-effect {
  backdrop-filter: blur(5px);
}

2. 明るさの調整

背景の明るさを調整するには、backdrop-filter プロパティの明るさ(値)を使用できます。

.backdrop-brightness-effect {
  backdrop-filter: brightness(80%);
}

3. コントラスト調整

背景のコントラストを調整するには、backdrop-filter 属性のコントラスト (値) を使用できます。

.backdrop-contrast-effect {
  backdrop-filter: contrast(150%);
}

4. 彩度の調整

背景の彩度を調整するには、backdrop-filter プロパティの saturate(value) を使用できます。

.backdrop-saturation-effect {
  backdrop-filter: saturate(200%);
}

要約すると、CSS のフィルター プロパティと背景フィルター プロパティを使用することで、追加の画像処理ツールを必要とせずに、さまざまなすりガラス効果を柔軟に実現でき、ページ デザインをより簡潔かつ効率的にすることができます。これらのプロパティは現時点ではまだ実験段階であるため、ブラウザやプラットフォームによって互換性が異なる可能性があるため、使用する場合は互換性テストが必要であることに注意してください。

以上がCSS 曇りガラスのプロパティ最適化のヒント: フィルターと背景フィルターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。