【CSS上級】box-shadowとfilter:drop-shadowの詳しい解説と裏技_html/css_WEB-ITnose

box-shadow は、フロントエンドの CSS 作成作業では非常に一般的であるはずです。しかし、box-shadow には従来の使い方とは別に、実は知られていないトリックがたくさんあります。

マークダウンバージョンが気に入った場合は、ここをクリックしてください。

box-shadow 従来の使用法

box-shadow と言えば、最初に思い浮かぶのは、シャドウを生成できるということでしょう。そのため、Shadowow と呼ばれます。その構文を簡単に見てみましょう。

基本的な属性構文

box-shadow プロパティは、ボックスに 1 つ以上の影を追加します。

box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;

このように box-shadow: 10px 10px 5px #888888; さらに、box-shadow が外側のシャドウと内側のシャドウであることを知っておく必要があります。はい、インナーシャドウはアトリビュートにインセットを追加することです。

OK、この記事では、box-shadow についてある程度の理解があることを前提としています。これに基づいて、box-shadow のその他の素晴らしい用途を見てみましょう。

box-shadow は複数の境界線をシミュレートします

通常、多くの要素に境界線を追加しますが、複数の境界線が必要な場合、現時点では境界線の単一重みの制限により、box-shadow は梁の表示を点滅させることができます。外側または内側のシャドウを使用して境界効果を簡単にシミュレートできます。

ここでは、内側から外側に向かって、box-shadow を使用して白、黒、グレーの 3 層の境界線を設定し、最も外側の層にぼかした影があることがわかります。

box-shadow にはぼかしを設定するパラメータがあります。これはぼかし距離です。上の例では、2 番目の影 0 0 0 10px #333 の 3 番目の 0 であり、ぼかしの値が 0 の場合、影になります。自体はぼかされないので、境界線の効果を簡単にシミュレートできます。

さらに、要素には複数のシャドウを設定でき、ボックスシャドウに最も近いカスケード優先度が最も高く、順番に優先度が低くなります。

もちろん、注目に値します:

シャドウは境界線ではなく、実際のスペースを占有せず、ボックス サイズの範囲に含めることはできません。ただし、(影が内側か外側かに応じて) パディングまたはマージンを使用して余分なスペースを確保することで、これをシミュレートできます。

上の例でシミュレートされた境界線は要素の外側にあります。ホバーやクリックなどのマウス イベントをキャプチャすることはできません。イベントが重要な場合は、inset キーワードを追加して要素内に影を表示させることができます。スペースを拡張するには、パディングを追加する必要がある場合があることに注意してください。

box-shadow は、半透明のマスク レイヤーをシミュレートします

多くの場合、背景を暗くし、半透明のマスク レイヤーを通して特定の UI コンポーネントを強調表示し、ユーザー エクスペリエンスを向上させるために、以下のようなマスク レイヤーを使用する必要があります。

従来のアプローチでは、通常、追加の要素、少なくとも擬似要素を前後にマスク層として使用します。

下位バージョンとの互換性を考慮しない場合は、実際に box-shadow を使用してマスク レイヤの効果をシミュレートできます。

ホバリング時に、スケールを使用して要素を拡大し、ボックスシャドウを使用してユーザーの視野に焦点を合わせるマスクを生成します。

デモ – クリックして見てください。

もちろん、注目に値します:

この方法を使用するには、IE9 以降、Firefox 4、Chrome、Opera、Safari 5.1.1 が box-shadow 属性をサポートしていることを必然的に考慮する必要があります。

ブラウザのビューポート サイズは人それぞれ異なるため、box-shadow で生成される影がどのような場合でもページ全体を覆うようにするには、シャドウ スプレッドのサイズを非常に大きく設定する必要がある場合があります。

この方法を実際に試してみたい場合は、box-shadow は、パフォーマンスの観点から見ると、パフォーマンスを消費するスタイルが異なります。レンダリングの観点からは、パフォーマンスを消費する側面も異なります。理由は、他のスタイルに比べて描画コードの実行に時間がかかりすぎるためです。 GPU 3D アクセラレーションもありますが、使用する場合は考慮する価値があります。ただし、一定のものはなく、今日パフォーマンスが悪いスタイルでも明日には最適化される可能性があり、ブラウザーごとに違いがあることを知っておく必要があります。

複数の box-shadow で何ができるかについて話しましょう:

複数の box-shadow の単純なグラフィックス

本質的に、box-shadow は多くの場合、それ自体を別の場所に投影することです。自分自身をコピーするbox-shadow!

この機能を使用すると、box-shadow を使用していくつかの単純なグラフィックを作成できます。 私の単一ラベル グラフィック デモでは、次のようなグラフィックがあります:

クラウド レイヤーは、擬似的に複数の box-shaodw を使用します。要素内で生成されます。ボックスシャドウを使用してこのグラフィックを描画する方法を直感的に表現するために、さまざまな色を使用してみましょう:

すべての影が同じ色の場合、それらは自然に雲になります:

もちろん、あなたの想像力が十分に豊かであれば、より複雑なことを行うこともできます。これも 1 つのラベルで完成します:

より難しい部分は、文字を囲む円です。不規則なコーナー、ダブル ボックス シャドウを使用してシャドウを作成する方法を見てみましょう。個人的には、あまり実用的ではないと思いますが、実際にやってみるととても楽しかったです。また、CSS の問題に遭遇したときは、さらに多くのことを学びました。オープンマインド。

さらに興味深いグラフィックスについては、ここをクリックしてください – デモ

立体的な効果を実現する複数のボックスシャドウ

このメソッドは、テキストの立体的な効果を実現するためにテキストシャドウにも使用できます。

複数のボックスシャドウを使用し、1px ずつオフセットし続けると、非常に立体感が生まれます。

ボタンで使用:

テキストで使用:

任意の画像変換を実現する複数のボックスシャドウ

まあ、正直に言うと~~これが最も興味深いと思います。

複数のボックスシャドウで他に何ができるでしょうか?ボックス シャドウの多重度により、つまりレイヤーの数に関係なく、理論的には、どの画像の各ピクセルも 1px*1px のボックス シャドウで表現できます。

このタスクを完了するために、canvas は画像の各ピクセルの rgba 値を取得できるメソッド CanvasRenderingContext2D.getImageData を提供するだけで、画像を box-shadow で完全に表現された画像に変換することが完全に可能になります。

このため、私は長い間苦労して、任意の画像を box-shadow で表される単一の div タグに変換できるような小さなプラグインを作成しました。

デモ – クリックして体験してください。

上記の点がまだ役立つ場合は、この機能は強力に見えることを除けば、実際には役に立たないと思います。前述したように、box-shadow は、変換後に 100px*100px のグラフィックでも 10,000 個のシャドウがあるため、比較的パフォーマンスを消費します。 、パフォーマンスと読みやすさの両方の点で壊滅的ですが、正直に言うと、それでもかなり興味深いです。

まず、box-shadow について説明しましょう。Box-shadow には他にも素晴らしい用途があることは間違いありません。注意している人は引き続き探索してください。

filter:drop-shadow

実際、box-shadow に関して言えば、それによく似たもう 1 つの新しい CSS3 プロパティ filter:drop-shadow について言及する必要があります。これは、要素がレンダリングされる前に、ぼかし、色移りなどの要素のレンダリングにいくつかの効果を提供します。フィルターは、画像、背景、境界線のレンダリングを調整するためによく使用されます。

もちろん、ここでは filter:drop-shadow についてのみ説明します。

filter:drop-shadow も非常に興味深いもので、長い議論を続けたかったのですが、Zhang Xinxu の 2 つの記事が私が言いたいことをすべて網羅していることがわかりました。先人たちは木を植え、子孫は日陰を楽しんできました。もう恥をさらさないでください。

読む価値のある2つの記事:

CSS3フィルター: ドロップシャドウフィルターとボックスシャドウアプリケーションの違い

PNG形式の小さなアイコン用のCSS任意カラーレンダリング技術

さらに「CSS SECRET」 「(CSS Revealed)」 この傑作には、filter:drop-shadow の詳細な説明もありますので、確認してください。

この記事が、特に問題解決について考えるという点で、皆さんのお役に立てれば幸いです。

この記事はこれで終わりです。まだご質問やご提案がございましたら、記事を書くのは簡単ではありませんので、お勧めいただければ幸いです。

限られた文体と限られた知識によるオリジナルの記事です。記事内に何か間違っている点があれば、お知らせください。