CSS Secret Garden: Blur_html/css_WEB-ITnose による強調の解除

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

前のセクション「明るさの調整による強調解除」では、1.5 個の透明を使用して明るさを調整し、Web アプリの一部の部分を強調しない方法を説明しました。黒いオーバーレイ。ただし、ページ上に多くのものがある場合は、ページ上のテキストに十分なコントラストを提供するため、または強調表示されたボックスやその他の要素にユーザーの注意を引くために、ページをかなり暗くする必要があります。以下に示すように、より洗練された方法は、調光以外のすべてをぼかす (またはまったく調光しない) ことです。これは、私たちが物理的に近くにあるものを見ることに集中するときの、物体の見方を模倣した奥行きを生み出すため、より現実的に見えます。

ゲーム サイトのpolygon.com は、ダイアログ ボックスの背後にあるすべてのものをぼかすことで、ユーザーの注意をダイアログ ボックスに集中させる素晴らしい例を提供しています。

しかし、この効果を達成するのはそう簡単ではありません。フィルター効果が登場する前は、blur() フィルターを使用したとしても、これを達成することはほとんど不可能でした。ぼかしフィルターを適用するにはどうすればよいですか。特定の要素を除くすべてに適用したい場合はどうすればよいでしょうか?これを 6c04bd5ca3fcae76e30b72ad730ca86d 要素に適用すると、ユーザーの注意を引きたい要素を含め、ページ上のすべてがぼやけます。これは、第 4 章のセクション 4 で発生した問題と非常によく似ていますが、背景画像だけでなくすべてがダイアログ ボックスの背後にあるため、ここでは同じ解決策を適用できません。どうやってこれを行うのでしょうか？

解決策

この効果を実現するには、追加の HTML 要素が必要です。要素をぼかしたくないものを除き、ページ上のすべてを 1 つの要素でラップする必要があります。それにぼかしを適用します。 61b85035edf2b42260fdb5632dc5728a 要素は、ページのメイン コンテンツ (通常、ダイアログ ボックスはメイン コンテンツではありません) をラップするだけでなく、必要なスタイルを結び付けることができるため、完璧です。 HTML タグは次のとおりです。

<main>Bacon Ipsum dolor sit amet…</main><dialog>    O HAI, I’m a dialog. Click on me to dismiss.</dialog><!-- any other dialogs go here too -->

すべての a38fd2622755924ad24c0fc5f0b4d412 要素は最初は非表示であり、常に表示されるのは 1 つだけであると想定します。

上の画像で最終結果を確認できます。次に、ダイアログ ボックスを表示してぼかしフィルターを適用するたびに、次のように 61b85035edf2b42260fdb5632dc5728a 要素にクラスを適用する必要があります。

main.de-emphasized {    filter: blur(5px);}

以下に示すように、これはすでに大きな進歩です。

ただし、ぼかしが非常に早く適用されるため、少し不自然に見え、ユーザー エクスペリエンスがぎこちなく感じられます。 CSS フィルターはアニメーション化できるため、ページをぼかすときにスムーズなトランジションを適用できます。

main {    transition: .6s filter;}main.de-emphasized {    filter: blur(5px);}

これら 2 つの強調解除効果 (ぼかしとぼかし) のアイデアを組み合わせると良いでしょう。 1 つの方法は、brightness() フィルターやcontrast() フィルターを使用することです。

main.de-emphasized {    filter: blur(3px) contrast(.8) brightness(.8);}

下の画像で結果を確認できます。

CSS フィルターによる調光は、サポートされていない場合にダウングレードがないことを意味します。したがって、他の方法、またはダウングレード (前のセクションで説明したボックスシャドウ方法など) によって減光効果を実現する方が良い場合があります。これは、上の画像のエッジなどの絞り効果の問題を解決するのにも役立ちます。下の画像では、調光に影を使用しており、この問題は解決されています。