box-shadow(css3)を使って浮かんだようなエフェクトをつけよう！

はじめに

今回はCSS3のbox-shadow(ボックスシャドウ)を使って浮かんだようなエフェクト(影)をつける方法をご紹介します。

ボックスシャドウとは、名前の通りボックスに影をつけてくれるプロパティです。

デザインをする際ドロップシャドウやグロー（光彩）を使う事は多々あると思いますが、それがCSSで出来ると思ってくれたら良いかと思います。

このブログでも使用しているボックスシャドウは今後、必須のプロパティになりそうなのでご紹介します。

知恵の樹で適応させている箇所を参考にどうぞ。
※画像の赤枠の部分です。

注意事項

・CSSが編集できるテンプレートであること。

・shadow(影)をつけるので背景が暗いカラーでは綺麗に表現できない場合があります。

・アメブロでの説明となります。

box-shadowの説明

基本のコードの簡単な説明
※このブログで使用しているコードサンプル

box-shadow: 1px 1px 7px #6B6D6C;

この指定方法は

赤字→横方向のずれ
青字→下方向のずれ
緑字→ぼかし具合
ピンク字→影のカラー

となります。

box-shadowの設定

今回はこのブログでも設定している「記事枠、サイドメニュー」の箇所の設定を例に紹介します。
下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※上記の説明を参考に調整して下さい。
※既存のブログの設定によっては反映されない場合があります。

/* ▼▼記事枠box-shadow設定ここから▼▼ */
.skinArticle {
box-shadow: 1px 1px 7px #6B6D6C;

 -webkit-box-shadow: 1px 1px 7px #6B6D6C; 

 -moz-box-shadow: 1px 1px 7px #6B6D6C;

}
/* ▲▲記事枠box-shadow設定ここまで▲▲ */

/* ▼▼サイドメニューbox-shadow設定ここから▼▼ */
.skinMenuBody {
box-shadow: 1px 1px 7px #6B6D6C;

 -webkit-box-shadow: 1px 1px 7px #6B6D6C;

 -moz-box-shadow: 1px 1px 7px #6B6D6C; 

}
/* ▲▲サイドメニューbox-shadow設定ここまで▲▲ */