スタイルシートの技
グラデーションのかかった水平線の作成 （Internet Explorer 4.0~）
グラデーションのかかった水平線などの作り方を紹介します。 グラデーションをかける対象はスタイルシートなので、別に水平線でなくても構いません。 対象が別にボックスでもグラデーションをかける事ができます。 但し、このスタイルシートは「Internet Explorer 4.0」以上でサポートされたフィルタ機能を使っていますので、 美しく表現できますが、不用意に乱用するのは避けましょう。また、旧マシンを使っている方にはこのフィルタリングは メモリを消費するため、ブラウザが重くなってしまいますので、注意してください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>グラデーション水平線</title>
<style type="text/css">
*.grad
{
width:100%;
color: #000099;
filter: Alpha(opacity=100,finishopacity=0,style=1);
}
</style>
</head>
<body>
<h1>グラデーションのかかった水平線</h1>
<hr class="grad">
</body>
</html>
それでは各種プロパティを説明して行きます。 「width:100%」なのですが、これは入れて下さい。 これを入れないと対象に適応されない事があります。 また、「Alpha」というのはフィルタリングにも沢山種類があり、 その中の透過のフィルタを利用するので、このように指定します。
filter : [ フィルタの種類 ](各種フィルタ情報)- opacity
- 始点の透過度を0〜100の間で指定します。
- finishopacity
- 終点の透過度を0〜100の間で指定します。
- style
- 透過させる種類を指定します。1:線形、2:円、3:長方形
このようになってます。この場合は、最初は透過度100で、最後に透過度0で、線形フィルタを適当するという事になるので、 サンプルのようになります（但し、「Internet Explorer 4.0」以上でないと通常の水平線に見えます）。
その他にも色々なグラデーションをかける事ができます。 先程は、線形でしたが、長方形にグラデーションをかけるとどうなるでしょうか？ちょっと試してみましょう。
*.grad_rectangle
{
width:100%;
color: #000099;
filter: Alpha(opacity=100,finishopacity=0,style=3);
}先ほども言いましたが、文字列や画像にグラデーションをかける事も可能です。 画像に円のグラデーションをかけたりするのに便利ですね。幻想、ファンタジーっぽく魅せる事ができます。
残念ながらInternet Explorer 4.0以下あるいは他ブラウザではフィルタリングがかからないので、 同じ画像が見えているはずです。今回の画像に施したフィルタは以下です。
*.grad_circle
{
width: 180px;
height: 135px;
filter: Alpha(opacity=100,finishopacity=0,style=2);
}img要素に直接指定する場合には記述する必要がありませんが、 div要素の中に画像を入れて、div要素にスタイルシートを適応する場合には、 画像の横幅が180ピクセル、高さが150ピクセルなのでその値をきちんと入力します。 そうしないとグラデーション領域がdiv要素全体となってしまいます。