CSS3のドロップシャドウ(box-shadow)のまとめ | 東京都世田谷区 ホームページ制作 [k]id

CSS3のドロップシャドウ(box-shadow)のまとめ

Category CSS Update 2015.06.23

shadow
twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

今更聞けないCSS3のドロップシャドウ(影)

IE8以下のアクセスが次第に淘汰され、ようやく安心してCSS3のプロパティが利用できるようになりました。

対応ブラウザは下記
Chrome
Internet Explorer 9+
Firefox 3.5+
Safari 3+

プロパティまとめ

box-shadowの設定値は下記になります。

.box {
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
}
サンプル

解説

1番目

水平(横)方向の長さを設定します。1pxにすると右へ -1pxにすると左へシフトします。

2番目

垂直(縦)方向の長さを設定します。1pxにすると下へ -1pxにすると上へシフトします。

3番目

ぼかしの強さ長さを設定します。0以上(マイナスの値は設定できません)を指定し、値が大きくなる程、ボケが強くなります。

4番目

広がり幅を指定します。

5番目

色を指定します。RGBaと16進法(#000000等)どちらでも指定出来ます。

6番目

影の向きを指定できます。 inset を指定すると影の向きを内側に指定出来ます。

設定サンプル

私がよく指定しているサンプルをご紹介します。

Sample1 下にフワッとした影
.box {
box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.4);
}
サンプル

 

Sample2 うっすら輪郭をつける
.box {
box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
}
サンプル

 

Sample3 Borderと組み合わせて内側に影と枠を作る
.box {
box-shadow: 0 0 6px 1px rgba(0,0,0,0.1) inset;
border:#bbb solid 1px;
}
サンプル

 

ページトップへ