Houn

Web制作

公開日:2019.10.16

更新日:2022.11.23

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

under-box-shadow

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

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

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

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

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

CSSの書き方

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


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

カスタマイズしたいかたへ〜値についての解説

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

box-shadow-under-css

影の形状やぼかし具合について

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

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

    そして2番目の値にてマイナス30pxに対してちょっと大きい32pxを指定していることで、そのぶん影がはみ出す形で出てきてくれます。

影の色や薄さについて

53, 47, 47が色の指定です。カラーコードですね。こういう色になってます。

まあ、ほぼ黒です笑。単純に0, 0, 0で真っ黒にしても良いかも知れないですね。

そして0.15が薄さ、透明度の指定です。1が透明度無し、完全クッキリです。今回は0.15なので、かなり薄くしている状態です。

まとめ

box-shadowは「並べた要素がノッペリしててなんかダサい」と思ったときに立体感を持たせられる便利なプロパティですが、値の指定次第でしつこくなってしまうもの。

今回のサンプル、解説が参考になれば幸いです。

サイト保守契約の便利ツール

この記事を読んでくださったWeb制作会社・フリーランスのあなたへ‥

Webサイトの保守業務委託においては、毎月定額の決済をお願いするのが一般的だと思います。

決済方法として便利なのがクレジットカード自動引き落とし。一度顧客に手続きいただければ毎月自動で決済してくれるので、制作会社側も顧客側も何の手間もかかりません。

当事務所で導入しているのがSquare(スクエア)

導入は無料で、コストはクレジット決済手数料(3%台)のみ。

毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。

制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。

非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。

無料でSquareに登録してみる