備忘録的プログラミングリファレンス

影を付ける(shadow effect)

 エレメントのフレームに影を付けて立体感を出すことができます。ここではbox-shadowプロパティを使った方法を示します。

 box-shadowプロパティはエレメント全体に影を付けるために、形に自由度はありません。

 影を付ける方法にはfilterプロパティを利用する方法もあります。filterプロパティは、エレメント内の画像の形に合わせて影を付けることもできます。

動作の確認

cssあり/なし、scriptあり/なしを選択することができます。

別ページで開きます。

HTML

 <div>エレメントに影を付ける例です。

css

 box-shadowプロパティが影を付けるためのプロパティです。その他のプロパティは例が見易くするために定義しています。

JavaScript