CSS Secret Garden: 不規則なShadow_html/css_WEB-ITnose

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

質問

box-shadow は、長方形または border-radius で作成できる形状にドロップ シャドウを適用する場合に最適です。ただし、疑似要素やその他の半透明のスタイルがある場合は、box-shadow が透明度を無視するため、うまく機能しない可能性があります。例:

• 半透明の画像、背景画像、または境界線画像 (昔ながらの金色の額縁など)。
• 背景のない点線の境界線、破線の境界線、または半透明の境界線 (境界ボックスではない場合は背景クリップ)
• 擬似要素を介してスピーカーの角を指している場合、ダイアログのバブルが作成されます。
• 「コーナーの切り抜き」秘密ページ 96 で見たようなコーナーの切り抜き。
• この章で後述するものも含め、最も多くの折り畳まれたコーナー エフェクト。
• 「ダイヤモンド画像」シークレットの 90 ページにあるダイヤモンド画像のような、クリップパスを介して作成されたグラフィック。

CSS スタイルを持つ要素で無効な box-shadow の場合、適用される box-shadow 値は 2px 2px 10px rgba(0,0,0,.5)

box-shadow の適用に失敗した結果を上の画像に示します。この状況に対する解決策はあるのでしょうか、それとも影の影響を完全に放棄する必要があるのでしょうか?

解決策

フィルター エフェクト仕様は、SVG から借用した新しいフィルター属性を介して、この問題の解決策を提供します。ただし、CSS フィルターは基本的に SVG フィルターから派生していますが、SVG の知識は必要ありません。代わりに、ブラー()、グレースケール()、ドロップシャドウ()などの便利な関数を介して指定されます。必要に応じて、次のようにスペースで区切って複数のフィルターをチェーンで適用することもできます。

filter: blur() grayscale() drop-shadow();

Drop-shadow() フィルターは、基本的な box-shadow と同じパラメーターを受け入れます。拡散半径や挿入キーワードはなく、複数の異なるシャドウをカンマで区切ることはできません。たとえば、

box-shadow: 2px 2px 10px rgba(0,0,0,.5);

と書く代わりに、次のように書くこともできます:

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

以下の画像では、最初に画像に適用された Drop-Shadow() フィルターがわかります。記事のエレメンタル効果。

ここでは別のぼかしアルゴリズムが使用される可能性があるため、ぼかし値の調整が必要になる場合があります。

CSS フィルターの最も優れた点は、CSS フィルターが適切に機能しなくなることです。CSS フィルターをサポートしていないブラウザーで検出された場合、フィルター効果は適用されません。できるだけ多くのブラウザで効果を表示する必要がある場合は、フィルタを組み合わせて適用することでブラウザのサポートを強化できます。各フィルター関数に対応する SVG フィルターは、フィルター効果の仕様で見つけることができます。 SVG フィルターと簡素化された CSS を一緒に使用して、カスケードに最適なものを選択させることができます。

filter: url(drop-shadow.svg#drop-shadow);filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

残念ながら、SVG フィルターが別のファイルである場合、CSS In コードでは、これはうまく機能しません。カスタマイズされたユーザーフレンドリーな機能ですが、インライン SVG だとコードが煩雑になってしまいます。ファイル内のパラメータは固定されており、少し異なるシャドウが必要なだけの場合、複数のファイルをインポートするのは現実的ではありません。データ URI を使用することもできますが (追加の HTTP リクエストも節約できます)、それでもファイルは大きくなります。これはフォールバックであるため、わずかに異なる Dropshadow() フィルターであっても、1 つまたは 2 つの変換を使用しても問題ありません。

考慮すべきもう 1 つの問題は、以下に示すように、テキスト (背景が透明な場合) を含むすべての不透明領域が無差別に影付けされることです。 text-shadow: none; を使用してテキストの影を削除できると思いますが、text-shadow は完全に独立しており、テキストに対する Drop-shadow() フィルターの効果を削除することはできません。さらに、text-shadow を使用して実際のテキストの影を実現すると、この影も、drop-shadow() フィルタによって再度影付けされ、影の影が作成されます。以下の例の CSS コードを見てください (完成した効果はまったく美しくありませんが、あらゆる方法でこれを実証しようとしています):

で効果を確認できます。以下の画像。これは text-shadow と drop-shadow() が連携する効果です:

color: deeppink;border: 2px solid;text-shadow: .1em .2em yellow;filter: drop-shadow(.05em .05em .1em gray);

text-shadow は、drop-shadow() フィルターを通じて影も生成します