ボックスシャドウ
CSS3では画像を使わずに簡単なコードでボックスにドロップシャドウをかけることが可能です。
「box-shadow」を使う
以下のようにブロック要素にbox-shadowを指定することでドロップシャドウをかけることが可能です。
index.html
<div class="box"> </div>
style.css
.box{
border-radius:10px;
width:100px;
height:100px;
background:rgb(70%,80%,60%);
box-shadow:1px 1px 2px rgb(0,0,0);
}
| box-shadow:○px △px □px rgb( ); | ボックスにドロップシャドウをかけます。 ○px分ボックスからの横の距離をずらします。 △pxは縦です。 □px分シャドウのぼかしの強さです。 最後にシャドウの色を決めます。 |
|---|
デザイン的な話になりますが、綺麗なドロップシャドウをかけるポイントは、距離もぼかしも色の濃さも強くしすぎないことです。シャドウがついているかどうか一見分からないくらいが丁度いいです。
見本は違いが分かりやすいようにしていますが、シャドウが濃すぎますね。
シャドウの色をRGBaを使って薄くするといいでしょう。