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

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

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

ボックスシャドウの一般的な使用法

box-shadow と言えば、まず影を生成できるということが思い浮かぶので、その構文を見てみましょう:

。

基本的な属性構文

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

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

こんな感じ box-shadow: 10px 10px 5px #888888; さらに、box-shadow はシャドウとインナーシャドウに分かれており、インナーシャドウはアトリビュートにインセットを追加するものであることを知っておく必要があります。

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

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

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

ご覧のとおり、内側から外側に向かって、白、黒、グレーの3層の境界線と、一番外側のレイヤーにぼかした影をボックスシャドウを使用して設定しています。

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

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

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

• 影は境界線ではなく、実際の空間を占有せず、box-sizing の範囲にも属しません。ただし、(影が内側か外側かに応じて) パディングまたはマージンを使用して余分なスペースを確保することで、これをシミュレートできます。

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

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

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

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

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

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

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

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

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

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

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

複数のボックスシャドウで何ができるかについて話しましょう:

複数のボックスシャドウを備えたシンプルなグラフィックス

基本的に、box-shadow は自分自身を別の場所に投影します。多くの場合、box-shadow を使用して自分自身をコピーできます。

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

の雲は、擬似要素内の

を使用して生成されます。以下では、ボックスシャドウを使用してこのグラフィックを描画する方法を直感的に表現するために、さまざまな色を使用しています: 多重box-shaodw

すべての影が同じ色であれば、自然に雲になります:

もちろん、想像力が豊かであれば、より複雑なことを行うこともできます。これも 1 つのタグで完成します。

より難しい部分は、文字 e を囲む円と不規則な角の切り込みです。ダブル ボックス シャドウを使用して影を作成する方法を見てみましょう。

もちろん、あなたはこれらのグラフィックが何のためにあるのか尋ねます。個人的にはあまり実用的ではないと思いますが、多くの CSS に出会うととても勉強になります。問題はありますが、私はもっとオープンマインドです。

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

立体感を実現する複数のボックスシャドウ

このメソッドは text-shadow にも使用して、テキストに立体感を与えることができます。

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

がボタンに適用される:

テキスト内で使用されている

:

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

うーん、正直に言うと~~これが一番面白いと思います。

複数のボックスシャドウで他にできること。ボックスシャドウ、つまり 无论多少重都可以 の多重度により、理論的には、どの画像の各ピクセルも 1px*1px のボックスシャドウで表すことができます。

このタスクを完了するために、canvas は画像の各ピクセルの rgba 値を取得するメソッド CanvasRenderingContext2D.getImageData を提供するだけで、画像を完全に次のように表される画像に変換することが完全に可能です。のボックスシャドウ。

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

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

上記の点がまだ役立つ場合は、この関数は、見た目が強力であることを除けば、実際には役に立たないと思います。なぜなら、100px*100px グラフィックであっても、box-shadow は比較的パフォーマンスに負荷がかかるからです。 10000 変換後は影が濃く、パフォーマンスと可読性の両方の点で壊滅的ですが、正直に言うと、それでもかなり興味深いです。

box-shadow まずこれらについて話しましょう。Box-shadow には他にも素晴らしい使い方があるはずです。注意深い人は引き続き探索してください。

フィルター:ドロップシャドウ

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

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

filter:drop-shadow も非常に興味深いもので、さらに長い議論を続けたいと思いましたが、张鑫旭マスターの 2 つの記事で私が言いたいことはすべて網羅されていることがわかりました。子孫は日陰を楽しみます。もう恥をさらすことはありません。

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

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

• PNG 形式の小さいアイコンに対する CSS 任意の色割り当て技術

また、名作『CSS SECRET』にもfilter:drop-shadowについて詳しく解説されておりますので、ぜひご覧ください。

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

この記事はこれで終わりです。まだ質問や提案があれば、記事を書くのは簡単ではありませんが、良いと思われる場合は、お寄せください。お勧めです。

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