画像を加工せずに、影をつける方法

画像を加工せずに、立体的にサイトやブログで表示させる、私が常用してる方法を紹介します。スタイルシートで指定する方法です。

n_jidouFX_02

こういう感じになります。

img {
padding: 2px 2px 0px;
border: 1px solid #EDECE9;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
background: #FFF;
}

↑これを、スタイルシートに追記すると、HTML内にある写真全てに陰影が付きます。

特定の画像だけにしたい場合は、以下のようにクラス指定にしてください。

.img_kage {
padding: 2px 2px 0px;
border: 1px solid #EDECE9;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
background: #FFF;
}

私は、広告にだけ陰影をつけて、他の画像には付けないという感じで使い分けてます。