ボックス要素や画像に対して立体的に見えるようにドロップシャドウをつけることがあります。
ドロップシャドウとは『テキストや画像に影が落ちているような表現』になります。
このドロップシャドウは、
- 方向
- ぼかし具合
- 色
- 大きさ
- 外側・内側
などいろいろと調整が可能です。
そこで今回はbox-shadowというCSSのプロパティとサンプルを使いながら解説していきます。
（有料になっていたらすいません🙇♂️）
box-shadowでボックス要素や画像に影をつける方法
今回はbox-shadowというCSSのプロパティを使って影を作ります。
これからいろいろなパターンをご紹介しますが、HTMLは共通でこちらになります。
<div class="box"></div>CSSの基本はこちらになります。
.box {
background-color: #a8d3ff;
box-shadow: 10px 10px; /* 影をつける */
height: 130px;
width: 130px;
}これが最もシンプルな影になります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
上記は水平方向と垂直方向の位置しか指定していませんが、他にも以下のように指定できます。
例）
.box {
box-shadow: 10px 5px 3px 2px #333 inset;
}これはそれぞれの値を半角スペースで区切り、全部で6つの値を指定できます。
値の意味は左から順に以下のようになります。
.box {
box-shadow: ① ② ③ ④ ⑤ ⑥;
}- 水平方向の影の位置 ※必須
- 垂直方向の影の位置 ※必須
- 影のぼかし具合
- 影の大きさ
- 影の色
- 影の向き（外側・内側）
この中で必須なのは水平方向・垂直方向の位置だけで、他は先ほどのサンプルのように省略可能です。
これを1つずつサンプルを使って解説していきます。
水平・垂直方向の位置
水平・垂直方向は必須になります。
先ほどのサンプルはこちらでした。
.box {
box-shadow: 10px 10px;
}これは『右に10px・下に10px』という意味です。
数値を大きくすれば位置も大きく動きます。
例えば以下のようにすると『右に15px・下に25px』になります。
.box {
box-shadow: 15px 25px;
}See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
水平方向か垂直方向の片方だけ影をつける
水平方向か垂直方向の片方だけ影をつけたいときは、以下のように書きます。
/* 水平方向のみ */
.box {
box-shadow: 10px 0;
}
/* 垂直方向のみ */
.box {
box-shadow: 0 10px;
}
/* これはNG(影は出ない) */
.box {
box-shadow: 10px;
}See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
片方だけなので立体感はありませんね。
右下ではなく左上にする
値をマイナスにすれば反対方向になります。
.box {
box-shadow: 10px 10px; /* 右下 */
}
.box {
box-shadow: -10px -10px; /* 左上 */
}See the Pen
box-shadow：水平垂直方向（マイナス方向） by junpei (@junpei-sugiyama)
on CodePen.
もちろん右上・左下にも可能です。
影のぼかし具合
ここまでは影を一切ぼかしていませんが、以下のようにすると影をぼかすことが出来ます。
.box {
box-shadow: 10px 10px 8px; /* 8pxがぼかし具合 */
}See the Pen
box-shadow：ぼかし by junpei (@junpei-sugiyama)
on CodePen.
ぼかすと立体感が増しますが、大きくしすぎると影が無い方向にも影が出てしまいます。
.box {
box-shadow: 10px 10px 50px; /* 50pxがぼかし具合 */
}See the Pen
box-shadow：ぼかし強め by junpei (@junpei-sugiyama)
on CodePen.
影の大きさ
ここまでは影と要素の大きさは同じでしたが、指定した値の分だけ大きさを変えられます。
影を大きくする
.box {
box-shadow: 10px 10px 0 6px; /* 6pxが影の大きさ */
}上記はぼかさない場合ですが、ぼかさない場合にも3つ目は省略せずに0を書く必要があります（省略して6pxと書くとそれがぼかしになる）
See the Pen
box-shadow：影の大きさ by junpei (@junpei-sugiyama)
on CodePen.
影を小さくする
値をマイナスにすると小さくなります。
.box {
box-shadow: 10px 10px 0 -6px; /* -6pxが影の大きさ */
}See the Pen
box-shadow：影の大きさ（マイナス） by junpei (@junpei-sugiyama)
on CodePen.
全方向(上下左右対称)に影
水平方向・垂直方向を0にして大きくすると全方向に影をつけられます。
.box {
box-shadow: 0 0 10px 6px; /* 10pxはぼかし、6pxは影の大きさ */
}See the Pen
box-shadow：影の大きさ（全方向） by junpei (@junpei-sugiyama)
on CodePen.
影の色
デフォルトでは影の色は黒ですが、カラーコードを書けば色を変えられます。
.box {
box-shadow: 10px 10px #ad7d4c;
}これはぼかしや大きさの値は省略してカラーコードを書いてOKです。
See the Pen
box-shadow：影の色を変更 by junpei (@junpei-sugiyama)
on CodePen.
影の向き（内側・外側）
デフォルトでは影は外側につきますが、以下のようにinsetを書くと内側になります（ぼかしが無いと分かりにくいのでぼかしています）
.box {
box-shadow: 10px 10px 6px inset;
}See the Pen
box-shadow：影の色を変更 by junpei (@junpei-sugiyama)
on CodePen.
内側にしない場合と影の位置が違いますが、同じようにする場合は水平・垂直方向をマイナスにします。
.box {
box-shadow: -10px -10px 6px inset;
}See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
内側・外側両方に影
影は内側・外側の両方につけることも可能です。
その場合はカンマで区切って2つ分書きます。
.box {
box-shadow: 5px 5px 6px #333, 5px 5px 6px #fff inset;
}これは最初が外側の影で、カンマの後が内側の影になります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
PNGやSVG画像で画像に沿って影をつける方法
PNGやSVGなど透過した画像の場合、box-shadowで影をつけると四角に影がついてしまいます。
これを画像の縁に沿って影をつけたい時はfilter: drop-shadow()を使います。
.box {
filter: drop-shadow(20px 20px 10px rgba(0,0,0,.5));
}box-shadowとの違いも見比べてみると分かると思います。
See the Pen
画像に影 by junpei (@junpei-sugiyama)
on CodePen.
四角の画像なら問題ありませんが、透過画像を使う時はfilter: drop-shadow()を使いましょう。
-
【CSS】画像の見え方を変えられるfilterの使い方【サンプル付きで解説】
続きを見る
まとめ
今回はbox-shadowで要素や画像に影をつける方法を解説してきました。
影の値はデザインカンプにも書いてあるので、見逃さないようにしましょう（控えめな影は見落としやすいです）
以上になります。
