box-shadowを一方向のみに出す

2018.12.17

box-shadowを一方向のみに出したいことがよくあるので、指定方法をメモしておきます。

サンプルコード

各方向に出すパターンを作って試してみます。

HTML

1
2
3
4
<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>

まずは普通に設定してみます。
box-shadowの設定は「box-shadow: X方向の距離 Y方向の距離 ぼかし 広がり 色 内側表示(inset);」のようになります。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
.top {
    box-shadow: 0 -5px 3px #000000;
}
.right {
    box-shadow: 5px 0 3px #000000;
}
.bottom {
    box-shadow: 0 5px 3px #000000;
}
.left {
    box-shadow: -5px 0 3px #000000;
}

この場合、一方向以外からも微妙に影が出てしまいます。
うまくいかなかった場合のデモページ
　

対策として、4番目の「広がり」の値に3番目の「ぼかし」の値と同じ量の負の値(今回の場合だと-3px)を指定して、はみ出ている分だけ全体的に影を縮小します。
これだけだと表示したい方向の影も縮小してしまうので、1番目または2番目の値に縮小した分だけ値を追加して影を伸ばします。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
.top {
    box-shadow: 0 -8px 3px -3px #000000; /* 0 (-5px - 3px) 3px (-3px) #000000 */
}
.right {
    box-shadow: 8px 0 3px -3px #000000; /* (5px + 3px) 0 3px (-3px) #000000 */
}
.bottom {
    box-shadow: 0 8px 3px -3px #000000; /* 0 (5px + 3px) 3px (-3px) #000000 */
}
.left {
    box-shadow: -8px 0 3px -3px #000000; /* (-5px - 3px) 0 3px (-3px) #000000 */
}

これで一方向だけbox-shadowを出すことができました。
box-shadowを一方向からのみ表示するデモページ
　

insetを追加して内側の影にした場合も同じように一方向にできるようです。
(影の位置が逆になるので注意してください。)

CSS

1
2
3
4
5
6
7
8
9
10
11
12
.top {
    box-shadow: 0 8px 3px -3px #000000 inset;
}
.right {
    box-shadow: -8px 0 3px -3px #000000 inset;
}
.bottom {
    box-shadow: 0 -8px 3px -3px #000000 inset;
}
.left {
    box-shadow: 8px 0 3px -3px #000000 inset;
}

box-shadowを内側で一方向からのみ表示するデモページ
　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031