【CSS】box-shadowを下だけ１方向から薄くかけるサンプル

box-shadowをかけるとき下方向からだけにして、うるさくならないようにします。さらに薄ーーくかけることで”上品な立体感”が出せます。

まず実際のサンプルはこちら

↓「かかってんの？」って感じるほどかも知れません。

でも、実際にかかってないのはこちら↓

やっぱり違いますね。フワッと柔らかい雰囲気が出せます。

上記の影はこう書かれています。これ、そのままコピペで使えますのでどうぞ。


.box-shadow-under {
  box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.15);
}

それぞれの値が何を指定しているか？についてはこちら。上記サンプルコードをカスタマイズしてお使いになる際は、参考にしてみてください。

まず、この４つの数値はそれぞれ以下の通りになります。

ヨコ方向の影の距離です。今回は下だけに当てるので当然０になります。ちなみに正の値を入れると右に、負の値だと左にそのpx分だけの影がつきます。
タテ方向の影の距離になります。正の値を入れると下。負の値だと上に影がつきます。今回は下なので正の値ですね。
影にぼかしを加えます。値のぶんだけぼかしが広がって、０だとぼかしがない、クッキリした影になります。
これは、影の広がりを調整します。要素に対する影のサイズですね。今回はぼかし具合の分だけマイナス＝縮小することで、左右に影が出なくなります。（こうしないと左右にボケた影がはみ出してしまいます）。
そして2番目の値にてマイナス30pxに対してちょっと大きい32pxを指定していることで、そのぶん影がはみ出す形で出てきてくれます。