CSS Secret Garden: 片面シャドウ_html/css_WEB-ITnose

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

質問

Q&A Web サイトで私が目にしたボックスシャドウに関する最もよくある質問は、オブジェクトの片側 (または、それほど頻繁ではないが両側) にのみシャドウを適用する方法です。 stackoverflow.com で簡単に検索すると、約 1,000 件の結果が表示されます。片面のシャドウはより微妙ですが、同様にリアルなシャドウ効果を生成できるため、これは当然のことです。多くの場合、影の効果に苦労している開発者は、開発を容易にするために box-shadow-bottom などの新しいプロパティを要求する電子メールを CSS ワーキング グループに送信することもあります。ただし、この効果は、私たちが学び愛用してきた box-shadow プロパティを賢く使用することで実現できます。

単一シャドウ

ほとんどの人がボックスシャドウを使用するとき、次のように 3 つの長さの値と 1 つの色の値をパラメータとして使用します:

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

以下の手順は、(技術的には完全に正確ではありませんが) デモを行うための良い方法です。これらの影の描画プロセス:

• 要素と同じサイズと位置の rgba(0,0,0,.5) 四角形を使用します。
• 右に 2 ピクセル、下に 3 ピクセル移動します。
• ガウスぼかしアルゴリズム (または同様のアルゴリズム) を使用したぼかした 4 ピクセル。つまり、影の色と完全な透明度のこのエッジでの影の色の間の遷移は、ぼかし半径 (この例では 8px ) の約 2 倍だけです。
• ぼやけた四角形が最初の要素と交差する場所で、最初の要素の「後ろ」になるようにぼやけた四角形をトリミングします。これは、ほとんどの作成者が影を設定する方法 (要素の下にぼやけた長方形を配置する) とは少し異なります。ただし、使用例によっては、要素の下に影が描画されないことに注意する必要があります。たとえば、要素に半透明の背景を設定すると、その下の影は表示されません。これは、テキストの下にクリッピングがないという点で text-shadow とは異なります。

特に明記されていない限り、ここでの要素のサイズは、CSS の幅と高さではなく、境界ボックスのサイズを指します。

ぼかし半径 4 ピクセルを使用すると、影のサイズが要素のサイズより約 4 ピクセル大きくなり、影の一部が要素の両側に表示されます。オフセットを少なくとも 4px 増やすことで、オフセットを変更して左と上の影を非表示にすることができます。しかし、これでは影が発達しすぎて見栄えが悪くなります。また、これは大したことではありませんが、覚えていますか?影が両方ではなく片側にだけあるようにします。

上と左の影を非表示にするために、オフセット値をぼかし半径の値と同じに設定してみてください。

正確には、上部に 1px ( 4px - 3px ) のシャドウ、左側に 2px ( 4px - 2px ) のシャドウ、右側に 6px ( 4px + 2px ) のシャドウ、そして 6px ( 4px + 2px ) 下の 7px (4px + 3px) に影を付けます。実際には、エッジの色の遷移が直線ではなく、グラデーションの変化によって区切られているため、小さく見えます。

解決策は、あまり知られていない 4 番目の長さパラメーターです。ブラー半径の後に指定され、スプレッド半径とも呼ばれます。拡散半径は、指定した数値だけ影のサイズを増加または減少させます (負の値)。たとえば、拡散半径が -5 ピクセルの場合、シャドウの幅と高さは 10 ピクセル (各側で 5 ピクセル) 減少します。

そのロジックは、負の拡散半径を適用しても、絶対値がブラー半径と等しい場合、シャドウは適用される要素とまったく同じサイズになるということです。オフセット (最初の 2 つの長さパラメーター) を使用して移動しない限り、それを見ることはできません (要素によってブロックされます)。したがって、正の垂直オフセットを適用すると、要素の下部にのみ影が表示され、他の側面には影が表示されません。これはまさに私たちが望んでいることです:

box-shadow: 0 5px 4px -4px black;

下の画像で効果を確認できます:

隣接する側面の影

もう 1 つのよくある問題は、両側に影を適用することです。これは、2 つの側面が隣接している場合 (たとえば、右と下) に実現するのが簡単です。以下のような効果を作成できます:

前のセクションで説明したテクニックのいくつかを適用することもできますが、以下のようないくつかの違いがあります:

• 我们不希望通过收缩阴影来完成两侧的模糊，而只是一侧。因此，我们把扩散半径(spread radius)的绝对值设置为模糊半径(blur spread)的一半即可。
• 因为我们想要在水平和垂直方向都移动阴影，我们需要设置两个偏移值。因为我们想要在另外两侧隐藏余下的阴影，所以偏移值必须大于或等于模糊半径的一半。

比如说，这是我们为右侧和底部应用一个 black 6px 阴影的代码：

box-shadow: 3px 3px 6px -3px black;

你可以在下图中看到效果。

对侧的阴影

如果我们想要在两个相对侧的阴影就比较麻烦了，比如说左侧和右侧。因为扩散半径应用在所有方向都是等同的（如，没有办法可以直接帮我们完成阴影在水平方向的延伸、垂直方向的收缩的话），我们的唯一办法就是使用两个阴影，一侧一个阴影。然后，我们基本上就可以采用前面介绍的“单侧阴影”一节的方法来完成，应用两次即可：

box-shadow: 5px 0 5px -5px black,            -5px 0 5px -5px black;

你可以在下图中看到效果：

对侧阴影 box-shadow

在CSS工作小组有关于分开水平/垂直扩散半径值的讨论，所以将来可能会更简单一些。