CSS3のbox-shadowプロパティを使用して、ボックス要素や画像にオシャレな影を付ける方法をご紹介します。

box-shadowはボックス要素に影を付けるプロパティです。
影を付けるとその要素を浮いたように見せることができるので面白いです。

他のプロパティと組み合わせて使用すると、よりオシャレなデザインや動きが実現できると思います。

box-shadowの基本的な使い方

box-shadowプロパティの指定方法を記載します。

それぞれの説明は下記になります。

水平方向

水平方向の影の距離を指定します。
マイナスの値を指定すると左方向に影が付きます。

垂直方向

垂直方向の影の距離を指定します。
マイナスの値を指定すると上方向に影が付きます。

ぼかし

影のぼかしを指定します。

広がり

影の広がりを指定します。

色

影の色を指定します。

inset

影を内側にする場合にinsetを指定します。

box-shadowで影を付ける（使用例）

HTML

影を付けるボックス要素を用意します。

CSS

シンプルに水平方向、垂直方向に影を付ける場合

影にぼかしを指定する場合

影に広がりを指定する場合

影に色を指定する場合

影を内側に指定する場合

他のプロパティを組み合わせたり、擬似要素を使用するとちょっと変わった影を付けることもできます。

「:before」「:after」にbox-shadowを指定しております。
背景色を消すとこんな感じです。

サンプル

サンプルではdiv要素に影を付けております。
ボックス要素が浮いてるように見えると思います。

「CSSでボックスに影を付ける方法」のデモページ

まとめ

今回は画像などを使わずにCSSだけでブロック要素に影を付ける方法を記載しました。
CSSの指定の仕方によっては、ボックス要素にオシャレな影を付けることができると思います。

ホームページのデザインを工夫したい場合など、取り入れてみるといいかもしれないですね。