この記事で紹介する方法はCSSのbox-shadow プロパティが利用できない古いWebブラウザでの表現方法です。
新しいWebブラウザでは、CSSのbox-shadow, filter プロパティを利用して簡単にドロップシャドウを描画できます。box-shadow, filterプロパティを利用する方法については
こちらの記事を参照してください。
ドロップシャドウのある枠をCSS/HTMLで作成するコードと表示結果を紹介します。
枠の影の画像を作成します。画像作成にはPhotoshopを利用します。
レイヤーを1枚作成し、おおよその枠のサイズの矩形を作成します。枠の横幅は完成時の横幅と同じ長さにします。
レイヤーを選択し右クリックしポップアップメニューを表示します。メニューの[レイヤー効果]を選択します。
[レイヤースタイル]ダイアログボックスが表示されます。左側の[スタイル]の下から2番目[光彩(外側)]にチェックを付けます。右側のパラメータは下図の通りとします。
[OK]ボタンを押し効果を確定します。下図の画像が描画できます。
レイヤーをラスタ化します。レイヤーを選択し右クリックしてポップアップメニューを表示します。メニューの[レイヤーをラスタライズ]を選択します。
レイヤーがラスタ化されました。背景を非表示にした状態が下図です。
1枚目の画像は矩形の中間部分を抜き出した画像(下図)を用意します。
背景を非表示にして透過PNG形式で保存します。
#img("html-css-create-shadowed-frame-using-shadow-image
2枚目の画像は矩形の上端と下端を組み合わせた画像(下図)を用意します。
こちらも背景を非表示にして透過PNG形式で保存します。
作成した画像は下図です。
以下のコードを記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="Stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="frame">
<div class="frame-top"></div>
<div class="frame-side">
<div class="frame-doc">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
</div>
</div>
<div class="frame-bottom"></div>
</div>
</body>
</html>
.frame
{
text-align:center;
margin-left:auto;
margin-right:auto;
width:420px;
}
.frame-top
{
background:url('./frame-cap.png');
padding-left:19px;
width:420px;
height:20px;
}
.frame-bottom
{
background:url('./frame-cap.png') 0px -68px;
padding-left:19px;
width:420px;
height:20px;
}
.frame-side
{
background:url('./frame-side.png') repeat-y left;
padding-left:19px;
width:420px;
}
.frame-doc
{
text-align:left;
margin-left:8px;
}
"frame-side"のDIV枠で横方向の影画像を設定しています。
"frame-top"で上端の影、"frame-bottom"で下端の影の画像を描画しています。下端の画像はオフセットを指定することで一枚の画像で上端と下端両方を使っています。
HTMLをブラウザで表示します。下図の結果が得られます。divの枠の周囲に影がついていることが分かります。
背景に画像を設定した場合の結果です。影は透過PNGで作成しているため、背景に画像が設定されている場合でもきれいに影がつきます。
