画像に指定の色とぼかし具合で影を付けるCSSプロパティがある

ウェブ上に画像を掲載したいとき、画像に陰を付けたいことがあります。画像単独だと背景に溶けてしまって周囲との差が出にくくなるものの、画像の周囲に枠線を付加するのは嫌だ、という場合とか。
スタイルシートを使えば、任意の画像に陰を付けることも簡単です。陰の配色は「ハッキリした黒い影」だけでなく、ぼかし具合を調整したカラーの陰など、自由に指定できます。陰の方向も右下・左下などの向きだけでなく、距離も自由に指定できます。

画像に陰を付ける表示例とCSSソース

下記に、画像に陰を付けた表示例と、それを実現するCSSソースをいくつか列挙してみます。

▼画像から下10px・右10pxの位置に、7pxのぼかしを加えて、黒色の陰を60%透過で付ける。

上記を実現するCSSソースは以下の通りです。

img {
	box-shadow: 10px 10px 7px rgba(0,0,0,0.4);
}

対象のimg要素に対して、box-shadowプロパティ1つを指定するだけです。これだけで陰が付けられます。
box-shadowプロパティの値には数値を複数個列挙します。先頭から順に、

1. 陰の左右方向の位置（プラスの値だと陰は右に、マイナスの値だと陰は左に見える）
2. 陰の上下方向の位置（プラスの値だと陰は下に、マイナスの値だと陰は上に見える）
3. 陰のぼかし具合（ゼロを指定すればハッキリくっきりした陰に。値を増やすほどぼやける）
4. 陰の色（RGBAカラーモデルを使えば、透明度を加えられる）

です。
百聞は一見にしかずということで、以下に列挙する表示例と記述例を見ていけば、書き方はすぐに把握できるでしょう。

▼画像から下6px・右8pxずらした位置に、4pxのぼかしを加えて、淡い赤色の陰を付ける。

陰は淡い赤色ですが、ここでは半透明にはなっていません。陰の部分には背景画像が透過していないことが分かるでしょう。
上記を実現するCSSソースは以下の通りです。

img {
	box-shadow: 8px 6px 4px #cc8080;
}

最後の色指定が「#cc8080」のように、16進数での表記になっています。陰を半透明にする必要がなければ、このような色指定もできます。

▼画像から上8px・右8pxずらした位置に、ぼかしなしで、半透明で緑色の陰を付ける。

ここでは陰が右上に表示されています。陰そのものは半透明ですが、ぼかしはありません。
上記を実現するCSSソースは以下の通りです。

img {
	box-shadow: 8px -8px 0px rgba(0,204,0,0.5);
}

2番目の値にマイナスの数値を指定していますから、陰は下方向ではなく上方向に表示されます。
また、3番目の値はゼロなので、陰はぼやけずにハッキリくっきり表示されます。

▼角を丸くした画像に、上8px・右8pxずらした位置に、ぼかしなしで、半透明で緑色の陰を付ける。

このように、画像の角を丸くしても、ちゃんと丸くした結果に合わせた陰が表示されます。
上記を実現するCSSソースは以下の通りです。

img {
   border-radius: 36px;
   box-shadow: 8px -8px 0px rgba(0,204,0,0.5);
}

box-shadowプロパティの値は先程と同じです。border-radiusプロパティを加えて画像の角を丸く見せています。

マウスが乗ったときにだけ影を変化させる

画像に対する装飾の場合は、画像がリンクになっている場合もあるでしょう。

▼マウスが乗ったときにだけ影を濃くする

画像の上にマウスポインタを載せてみて下さい。

上記を実現するCSSソースは以下の通りです。

/* ▼通常時の陰 */
img {
   box-shadow: 10px 10px 7px rgba(0,0,0,0.4);
}
/* ▼マウスポインタが載った際の陰 */
img:hover {
   box-shadow: 10px 10px 4px rgba(0,0,0,0.6);
}

hover疑似クラスを使って、陰の透明度を下げています。(不透明度の指定を0.4から0.6に上げています。)

▼マウスが乗ったときにだけ影の色を変える

画像の上にマウスポインタを載せてみて下さい。

上記を実現するCSSソースは以下の通りです。

/* ▼通常時の陰 */
img {
   box-shadow: 10px 10px 7px rgba(0,0,0,0.4);
}
/* ▼マウスポインタが載った際の陰 */
img:hover {
   box-shadow: 10px 10px 7px #00cc00;
}

マウスポインタが載っていないときは、60％透過した黒色の陰を付けています。
マウスポインタが載ると、緑色の不透明の陰に変化させています。

▼マウスが乗ったときにだけ影のぼかしをなくす

画像の上にマウスポインタを載せてみて下さい。

上記を実現するCSSソースは以下の通りです。

/* ▼通常時の陰 */
img {
   box-shadow: 10px 10px 7px gray;
}
/* ▼マウスポインタが載った際の陰 */
img:hover {
   box-shadow: 10px 10px 0px gray;
}

マウスポインタが載っていないときは、7pxの幅でぼかした陰を付けています。
マウスポインタが載ると、陰のぼかしはなくなります。

というわけで、画像に指定の色とぼかし具合で影を付ける方法でした。

■関連記事：

• 画像の周囲をグラデーションでぼかしながら丸くくり抜くCSS
• 画像の四隅(角)を丸くするCSS
• マウスが載ったときだけ画像を半透明にする方法
• hover疑似クラスで(マウスが載った際に)リンク画像を切り替える

(更新日：2016年05月02日)