不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード

border-radius で生成できる四角形やその他の図形に影を追加する場合 (「Adaptive Ellipse」セクションのいくつかの例を参照)、box-shadow は完璧に機能します。ただし、要素に疑似要素や半透明の装飾が追加されている場合は、border-radius は透明な部分を恥ずかしげもなく無視するため、少し無力になります。このような状況には次のようなものがあります:

• 半透明の画像、背景画像、または境界線画像（昔ながらの金色のフレームなど）。
• 要素には点線、破線、または半透明の境界線がありますが、背景はありません (または background-clip が border-box でない場合)。
• 吹き出し。その末尾は通常、疑似要素を使用して生成されます。

このような要素に box-shadow を直接適用すると、不完全な投影しか得られません。投影効果を完全に放棄することしかできないのでしょうか?この問題を解決する方法はありますか?

フィルター効果仕様 (http://w3.org/TR/filter-effects) は、この問題の解決策を提供します。また、SVG から借用した filter という新しい属性が導入されています。 CSS フィルターは基本的に SVG フィルターですが、使用するために SVG の知識は必要ありません。代わりに、blur()、grayscale()、そして必要な drop-shadow() など、フィルター効果を簡単に指定できるいくつかの関数だけが必要です。必要に応じて、スペースで区切って複数のフィルターを連結することもできます。次に例を示します。

フィルター: ぼかし() グレースケール() ドロップシャドウ();

drop-shadow() フィルターは box-shadow プロパティと同じパラメータを受け入れますが、拡張半径は含まれず、inset キーワードも含まれず、コンマ区切りのマルチレイヤー シャドウ構文もサポートされません。たとえば、上の投影は次のようになります。

ボックスの影: 2px 2px 10px rgba(0,0,0,.5);

次のように書くことができます:

フィルター: ドロップシャドウ(2px 2px 10px rgba(0,0,0,.5)); 

CSS フィルターの最も優れた点は、適切に機能が低下することです。ブラウザーがフィルターをサポートしていない場合は何も起こらず、効果がありません。この効果をできるだけ多くのブラウザで動作させる必要がある場合は、SVG フィルターを添付して、ブラウザのサポートを少し向上させることもできます。各フィルター関数に対応する SVG フィルター バージョンについては、フィルター効果仕様 (http://www.w3.org/TR/filter-effects/) を参照してください。 SVG フィルターと簡略化された CSS フィルターを組み合わせて、どの行を適用するかをカスケードで決定することができます。

フィルター: url(drop-shadow.svg#drop-shadow);
フィルター: ドロップシャドウ(2px 2px 10px rgba(0,0,0,.5));

残念ながら、SVG フィルターが別のファイルに保存されている場合、簡潔で使いやすい関数のように CSS コード内で自由に構成することはできません。インラインの場合は、コードが乱雑になります。パラメータはファイル内にハードコードする必要があるため、新しい投影効果を追加するたびに、たとえ類似したものであっても、追加のファイルを準備する必要がありますが、これは明らかに受け入れられません。もちろん、データ URI を使用することもできます (これにより、余分な HTTP リクエストも節約されます) が、この方法ではファイル サイズが依然として増加します。一般に、このアプローチは単なるフォールバック ソリューションであるため、SVG フィルターの数を一定の制限以下に抑える限り、効果が同様であっても許容されます。

覚えておくべきもう 1 つの点は、先ほど見たように、テキスト (背景が透明な場合) を含め、透明でないものはすべて同じように影が付けられるということです。 text-shadow: none; を使用するとテキストの影を消すことができるのだろうかと疑問に思うかもしれません。実際、text-shadow はこれとはまったく関係がないので、これを行うとテキストの drop-shadow() 効果がキャンセルされることはありません。さらに、すでに textshadow を使用してテキストにドロップ シャドウを追加している場合は、テキスト シャドウは drop-shadow() フィルターによってシャドウされ、基本的にシャドウにドロップ シャドウが追加されます。次のコード例をご覧ください (ひどい結果はご容赦ください。これはこの奇妙な問題を強調するためだけです)。

色: ディープピンク;
境界線: 2px 実線;
テキストシャドウ: .1em .2em 黄色;
フィルター: ドロップシャドウ(.05em .05em .1em グレー);

レンダリング効果を確認すると、画像内のテキストに textshadow と drop-shadow() の両方がマークされていることがわかります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。