CSSでぼかし距離を設定するにはどうすればよいですか?

CSS (Cascading Style Sheets) は、Web サイトのビジュアルをデザインするための強力なツールです。Blur効果は、Blurを使用して要素のプロパティをぼかすために使用される CSS の多くの機能の 1 つです。柔らかく夢のような効果を作成したり、ページ上の特定の要素に注目を集めたりするには、ぼかし効果を使用できます。

＃＃＃文法＃＃＃ リーリー

CSS におけるファジー距離の概念

ファジー距離の設定の実際的な側面について説明する前に、ファジー距離の概念を理解することが重要です。要素に適用されるブラーの量は、ブラー距離と呼ばれます。値はピクセル (px)、em、またはその他の CSS 単位で定義できます。

「blur」プロパティを使用して CSS でぼかし距離を適用する方法

CSS でぼかし距離を設定するには、blur 属性を使用する必要があります。 Blur プロパティは、要素に適用するブラーの量を設定します。ぼかし属性を使用するには、まずぼかし効果を適用する要素を選択し、次にぼかし属性を目的の値に設定します。

たとえば、画像にぼかし効果を適用するには、次の CSS コードを使用できます -

リーリー

ここでは、「img」要素を選択し、それに 5 ピクセルのぼかし効果を適用しました。

例 1

これは、上記のメソッドの完全なコード例です。

リーリー

Web ページ内のさまざまな要素にさまざまなファジー距離を適用できます。これを行うには、各要素を個別に選択し、「blur」プロパティを目的の値に設定します。例えば -＃＃＃ リーリー

ここでは、最初の "h1" と 2 番目の "img" の 2 つの要素を選択し、それに応じて 3 ピクセルと 5 ピクセルのぼかし効果を適用しました。

例 2: 異なる要素に異なるぼかし距離を適用する

リーリー

CSS で距離をぼかしたフォーカス効果を作成する

フォーカス効果の作成は、CSS でのぼかし効果の最も一般的な使用法です。この効果は、フォーカスされた要素を除く Web ページ上のすべての要素にぼかし効果を適用することによって実現されます。

CSS でぼやけた距離を持つフォーカス効果を作成するには、「:not」疑似クラスで「blur」属性を使用します。 「:not」疑似クラスを使用すると、ユーザーは特定の要素を除くすべての要素を選択できます。例えば -＃＃＃ リーリー

ここでは、ユーザーが「blur」クラスの上にマウスを移動したときに、「blur」クラスのすべての子要素に「blur」属性を適用します。 「no」疑似クラスを使用するとクラス「no-blur」の要素がブラー効果から除外されるため、この効果はクラス「no-blur」の要素には機能しません。

例 3

これは、上記のメソッドの完全なコード例です。

リーリー ＃＃＃結論は＃＃＃

CSS でぼかし距離を設定することは、Web ページに視覚的な魅力を追加する簡単かつ効果的な方法です。次の例を使用すると、Web ページにぼかし効果を簡単に作成できます。

以上がCSSでぼかし距離を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。