暗闇で発光しているようなタイトルを作成する

IE5.0以降のみ（Macintosh版IE5.0では表示されない場合があります）

IEの「glow」フィルタ利用すると、光を放っているような状態を表現することができます。ここでは、「glow」フィルタを利用して、暗闇で発行しているように文字列を表示させる方法を考えてみましょう。

■　文字列とフィルタの設定

表示する文字列とフィルタの設定をします。

<DIV STYLE="width:100%;font-size:40pt;color:#ffcc00;font-weight=bold;text-align:center;
filter:glow(color=#ffffff, strength=8)">
<P>&nbsp;</P>
<P>★夜間飛行★</P>
</DIV>

例では、変化させるタイトル文字の表示領域の幅は100％、フォントサイズは40ポイント、文字色は黄色、太字、中央に設定しています。また、「glow」フィルタの属性は、「color」（発光色）を白（#ffffff）、「strength」（発光の強さ）を「8」に指定しています。

■　レイヤーを使った背景色設定

「glow」フィルタを利用すると、例の記述方法のように発光色と発光の強さを指定することで、文字列の周囲をぼかすことができます。このとき、光を放っているように見せるためには、背景色には濃い色を、文字列には明るい色を設定します。例では、レイヤーを使って背景色を黒に設定し、文字列をレイヤー内に置いています。

<div id="Layer1" style="position:absolute; left:126px; top:189px; width:691px; height:217px; z-index:1; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">
- - - - - - -
</div>

例では、ほのかに光っている様子を表現するために、光の強さ（strength）には「7」を指定しています。

<<<戻る