2007年4月 1日

CSSで画像に枠や影をつける

今回は、CSSで「画像に枠や影（ドロップシャドウ）を付ける方法」を説明します。
デジカメや携帯カメラで撮った写真を、そのまま貼り付けただけでは、デザイン的に何となく寂しく感じることはありませんか？　そのような場合には、是非、お試しください。

■ カスタマイズ例

画像に影をつけるには

CSSで画像に影（ドロップシャドウ）を付けるには、

1.画像と影画像を用意します。

2.画像の後ろに、影画像を背景画像として重ねます。

3.そして、前の画像を左上の方向にずらすことで、ドロップシャドウの効果を実現することができます

画像に枠や影をつける

では、具体的に、画像に影（ドロップシャドウ）を付けるカスタマイズ方法を説明します。

1. 影の画像を作成する
まず、photoshopなどの画像処理ソフトを使って影画像を作成します。

Photoshopの場合でしたら、長方形ツールで、長方形を作成し、レイヤー効果の「ドロップシャドウ」を利用すると、思い通りの影画像が簡単に作成できます。

■ サンプル素材
下記のリンクを右クリックして[対象をファイルに保存]を選択するとサンプル画像がダウンロードできます。

影画像（画像背景用）

（横：400px 　縦：400px　[影（下）：5px、影（右）：5px]）

影画像を用意しましたら、サーバーにアップロードします。

2. HTMLテンプレートの編集
img要素を、影用のspan要素「」で括ります。
span要素は、divでもpでも問題ありません。（テンプレートの記述に適合する要素をお使いください）

＜HTML の記述例＞

なお、画像の横にテキストが回り込んで表示されるのを解除するには、
「br clear="all" /」を追加します。

3. CSSの編集
スタイルシートで、画像の位置や枠の色等を調整します。

＜CSS の記述例＞

.shadow {
margin: 0 0 0 5px;
background: url(影画像URL) right bottom;
float: left;
}

.shadow img {
position: relative;
left: -5px;
top: -5px;
padding: 5px;
background: #ffffff;
border: 1px solid #999999;
}

以上で、枠と影（ドロップシャドウ）がついた画像が完成です。

画像に影をつける

白い縁（ふち）や外枠を消して、影のみにするには、スタイルシートの「.shadow img」の「padding」「background」「border」等を削除するだけでOKです。

■ カスタマイズ例

＜CSS の記述例＞

.shadow img {
position: relative;
left: -5px;
top: -5px;
}

以上で、影（ドロップシャドウ）がついた画像が完成です。

参考になりましたら、応援お願いします。