ボックスに影をつける

画像で表現することが多い影付きボックスを、
CSSで手軽に再現することができます。

.kage_box {
background-color:#EFEFEF;
-moz-box-shadow: 5px 5px 5px #DDD;    /* firefox　*/
-webkit-box-shadow: 5px 5px 5px #DDD;  /* safari、chorme */
width:400px;
padding:5px;
}

-moz-box-shadowでFIrefox、
-webkit-box-shadowでSafari、Google Chorme用の記述となり、
横方向のずれ、下方向のずれ、ぼかしの半径、ぼかしの色の順に指定していきます。
角丸にするプロパティのborder-radiusを併用すると、
角丸で影付きのボックスを作成することができます。

.kage_box2 {
background-color:#EFEFEF;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin:0px 0px 15px 0px;
width:400px;
padding:5px;
}

※IE8以下ではbox-shadowに対応していません。
IE9からは対応するようです。

コメントを投稿する