要素に影(ドロップシャドウ)を付ける box shadow (drop shadow)

影(ドロップシャドウ)について

要素に影を付ける場合はbox-shadowプロパティを使用します。
指定方法は以下の2つがあり、1つ目で通常の外側、2つ目のinsetを指定することで内側に影を付けることができます。
また、ぼかし、広がり距離、色は省略でき、色を省略した場合は文字色と同色が反映されます。

【構文】

							box-shadow:X軸の距離 Y軸の距離;
							または
							box-shadow:X軸の距離 Y軸の距離 ぼかしの長さ;
							または
							box-shadow:X軸の距離 Y軸の距離 ぼかしの長さ 広がりの長さ;
							または
							box-shadow:X軸の距離 Y軸の距離 ぼかしの長さ 色;
							または
							box-shadow:X軸の距離 Y軸の距離 ぼかしの長さ 広がりの長さ 色;
						

【構文(inset)】

							box-shadow:inset X軸の距離 Y軸の距離;
							または
							box-shadow:inset X軸の距離 Y軸の距離 ぼかしの長さ;
							または
							box-shadow:inset X軸の距離 Y軸の距離 ぼかしの長さ 広がりの長さ;
							または
							box-shadow:inset X軸の距離 Y軸の距離 ぼかしの長さ 色;
							または
							box-shadow:inset X軸の距離 Y軸の距離 ぼかしの長さ 広がりの長さ 色;
						

サンプル

sample 1

sample 2

sample 3

sample 4

sample 5

sample 6

sample 7

sample 8

sample 9

sample 10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* 外側 */
div.sample1 {
    -webkit-box-shadow:2px 2px;
    -moz-box-shadow:2px 2px;
    box-shadow:2px 2px;
}
 
div.sample2 {
    -webkit-box-shadow:2px 2px 2px;
    -moz-box-shadow:2px 2px 2px;
    box-shadow:2px 2px 2px;
}
 
div.sample3 {
    -webkit-box-shadow:2px 2px 0 2px;
    -moz-box-shadow:2px 2px 0 2px;
    box-shadow:2px 2px 0 2px;
}
 
div.sample4 {
    -webkit-box-shadow:2px 2px 2px 2px;
    -moz-box-shadow:2px 2px 2px 2px;
    box-shadow:2px 2px 2px 2px;
}
 
/* 内側 */
div.sample5 {
    -webkit-box-shadow:2px 2px 2px 2px #00d;
    -moz-box-shadow:2px 2px 2px 2px #00d;
    box-shadow:2px 2px 2px 2px #00d;
}
 
div.sample6 {
    -webkit-box-shadow:inset 2px 2px;
    -moz-box-shadow:inset 2px 2px;
    box-shadow:inset 2px 2px;
}
 
div.sample7 {
    -webkit-box-shadow:inset 2px 2px 2px;
    -moz-box-shadow:inset 2px 2px 2px;
    box-shadow:inset 2px 2px 2px;
}
 
div.sample8 {
    -webkit-box-shadow:inset 2px 2px 0 2px;
    -moz-box-shadow:inset 2px 2px 0 2px;
    box-shadow:inset 2px 2px 0 2px;
}
 
div.sample9 {
    -webkit-box-shadow:inset 2px 2px 2px 2px;
    -moz-box-shadow:inset 2px 2px 2px 2px;
    box-shadow:inset 2px 2px 2px 2px;
}
 
div.sample10 {
    -webkit-box-shadow:inset 2px 2px 2px 2px #00d;
    -moz-box-shadow:inset 2px 2px 2px 2px #00d;
    box-shadow:inset 2px 2px 2px 2px #00d;
}

また、水平方向の位置、垂直方向の位置に負の値を指定することで、逆方向に影が付くようになります。

外側

内側

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 外側 */
div.sample1 {
    -webkit-box-shadow:-2px -2px 3px 0 #000;
    -moz-box-shadow:-2px -2px 3px 0 #000;
    box-shadow:-2px -2px 3px 0 #000;
}
 
/* 内側 */
div.sample2 {
    -webkit-box-shadow:inset -2px -2px 3px 0 #000;
    -moz-box-shadow:inset -2px -2px 3px 0 #000;
    box-shadow:inset -2px -2px 3px 0 #000;
}

複数の影を指定

カンマで区切ることにより、1つの要素に対して複数の影を付けることが可能です。

サンプル

外と内

1
2
3
4
5
6
div.sample {
    -webkit-box-shadow:2px 2px 3px 0 #000, inset 2px 2px 3px 0 #d00;
    -moz-box-shadow:2px 2px 3px 0 #000, inset 2px 2px 3px 0 #d00;
    box-shadow:2px 2px 3px 0 #000, inset 2px 2px 3px 0 #d00;
}

応用編(様々な影の表現)

影やその他のプロパティを使用することで、影の様々な表現が可能です。

サンプル

1
2
3
4
5
6
div.sample {
    -webkit-box-shadow:0 5px 5px -5px #000;
    -moz-box-shadow:0 5px 5px -5px #000;
    box-shadow:0 5px 5px -5px #000;
}

サンプル

1
2
3
4
5
6
div.sample {
    -webkit-box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.5), inset 2px 2px 2px 0 #fff, inset -2px -2px 2px 0 #ddd;
    -moz-box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.5), inset 2px 2px 2px 0 #fff, inset -2px -2px 2px 0 #ddd;
    box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.5), inset 2px 2px 2px 0 #fff, inset -2px -2px 2px 0 #ddd;
}

CSS3逆引きリファレンス一覧へ戻る