要素に影(ドロップシャドウ)を付ける 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.sample 1 { -webkit- box-shadow : 2px 2px ; -moz- box-shadow : 2px 2px ; box-shadow : 2px 2px ; } div.sample 2 { -webkit- box-shadow : 2px 2px 2px ; -moz- box-shadow : 2px 2px 2px ; box-shadow : 2px 2px 2px ; } div.sample 3 { -webkit- box-shadow : 2px 2px 0 2px ; -moz- box-shadow : 2px 2px 0 2px ; box-shadow : 2px 2px 0 2px ; } div.sample 4 { -webkit- box-shadow : 2px 2px 2px 2px ; -moz- box-shadow : 2px 2px 2px 2px ; box-shadow : 2px 2px 2px 2px ; } /* 内側 */ div.sample 5 { -webkit- box-shadow : 2px 2px 2px 2px #00d ; -moz- box-shadow : 2px 2px 2px 2px #00d ; box-shadow : 2px 2px 2px 2px #00d ; } div.sample 6 { -webkit- box-shadow : inset 2px 2px ; -moz- box-shadow : inset 2px 2px ; box-shadow : inset 2px 2px ; } div.sample 7 { -webkit- box-shadow : inset 2px 2px 2px ; -moz- box-shadow : inset 2px 2px 2px ; box-shadow : inset 2px 2px 2px ; } div.sample 8 { -webkit- box-shadow : inset 2px 2px 0 2px ; -moz- box-shadow : inset 2px 2px 0 2px ; box-shadow : inset 2px 2px 0 2px ; } div.sample 9 { -webkit- box-shadow : inset 2px 2px 2px 2px ; -moz- box-shadow : inset 2px 2px 2px 2px ; box-shadow : inset 2px 2px 2px 2px ; } div.sample 10 { -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.sample 1 { -webkit- box-shadow : -2px -2px 3px 0 #000 ; -moz- box-shadow : -2px -2px 3px 0 #000 ; box-shadow : -2px -2px 3px 0 #000 ; } /* 内側 */ div.sample 2 { -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 ; } |