box-shadowを特定の方向だけに適用する方法 – 影を横には出さずに縦だけに出したいんです

CSSである要素に強調を持たせるために、プロパティbox-shadowは非常に有用な機能です。しかし、特定の方向だけに影を適用したいと思っても実際には不要な方向にも弱い影が出てしまうことがあります。この問題を回避するためのテクニックをご紹介します。

box-shadowの基本

box-shadowはCSSで影を指定するためのプロパティです。下のように書くことで、要素に影を指定できます。

box-shadow: x-offset y-offset blur-radius spread-radius color;

パラメータの意味

  • x-offset: 影を横軸に伸ばす値 (正は右、負は左)
  • y-offset: 影を縦軸に伸ばす値 (正は下、負は上)
  • blur-radius: ぼかしの強さ
  • spread-radius: 影の広がり
  • color: 影の色

例:

.box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

上記の値は、下側に影が伸び、淡くなる値を指定しています。

問題: y軸のみに影を指定したいのに、x軸にも影が出る

たとえば、下のように書いた場合を考えてみます:

.box {
  box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.5);
}

この例では、x軸のオフセットを0にしているのにも関わらず、影があるように見えることがあります。これは、blur-radiusの効果で、影が自然にずれて見えるためです。

解決策: spread-radiusを利用する

この問題を解決するには、spread-radiusの値を調整することで、影が不要な方向に出てしまわないようにすることが可能です。

例:

.box {
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.5);
}

このようにすると、blur-radiusを解除したために影は減り、直接的なものになります。

さらに基本を強化する

既にblur-radiusを利用して影を出したい場合でも、spread-radiusの調整を行うことで、影の形状を精密に制御できます。下の例を見てみましょう:

.box {
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.5);
}

この値は、弱めの影が下側に伸び、さらに不要な部分をカットすることを意味します。

最後に

box-shadowを一方向に適用するのは、CSSの小さなテクニックで解決できる問題です。spread-radiusやblur-radiusの値を調整しながら、自分の意図にあった影の出し方を検討しましょう。CSSの基本を磨き上げて、スタイリングを構築するスキルを高めることが出来るはずです。