背景をグラデーションする 1
■ 背景をタテにグラデーションする
前回は、テーブルのデザイン変更術を学びました。
今回は、背景をヨコにグラデーションして遊んでみます。
背景をヨコにグラデーションする
filter: alpha(opacity=数値,finishopacity=数値,style=数値);
入力ソースはこちら。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);">
<tr><td>
</td></tr>
</table>
|
これをベースに下で細かく説明していきます
まずは、「opacity=100」の部分。
これは、背景自体の透明度を設定します。
(数字が小さいほど、背景が透明になります)
「opacity=50」に変えてみます。
入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=50,finishopacity=30,style=1);">
<tr><td>
</td></tr>
</table>
|
つぎに「finishopacity=30」の部分。
グラデーションの度合いを設定します。
(数字が小さいほど、グラデーションの割合が大きくなります)
「finishopacity=70」に変えてみましょう。
入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=70,style=1);">
<tr><td>
</td></tr>
</table>
|
「finishopacity=10」のとき。
入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=10,style=1);">
<tr><td>
</td></tr>
</table>
|
つぎに「style=1」の部分。
グラデーションのパターンを設定します。
(style=1かstyle=2)
「style=1」のとき。
入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);">
<tr><td>
</td></tr>
</table>
|
「style=2」のとき。
入力ソース。
<table width="190" height="80" style="border:1px solid #ff6666;
background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=2);">
<tr><td>
</td></tr>
</table>
|
今まで学んできたことは
「td」タグにも設定することができます。
入力ソース。
<table width="190" height="80" style="border:1px solid #0066ff;">
<tr><td width="100%" height="30%" style="background-color:#ccffff;
filter:alpha(opacity=100,finishopacity=30,style=1);">
</td></tr><tr><td width="100%" height="70%">
</td></tr>
</table>
|
|