--.--
--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

05.05
Fri
・応用編


■ 背景をグラデーションにする

前回は、カラフルなテーブル枠3を学びました。
今回は、背景をヨコにグラデーションして遊んでみます。



今回は「filter: alpha(opacity=100,finishopacity=30,style=1);」をつかいます。





入力ソースはこちら。
<table cellspacing="0" cellpadding="5" 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 cellspacing="0" cellpadding="5" 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 cellspacing="0" cellpadding="5" 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 cellspacing="0" cellpadding="5" 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 cellspacing="0" cellpadding="5" 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 cellspacing="0" cellpadding="5" 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 cellspacing="0" cellpadding="5" 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>




次回は、このグラデーションをタテにしてみます。
関連記事
スポンサーサイト

comment 0 trackback 0
トラックバックURL
http://oyedihawakisi.blog37.fc2.com/tb.php/166-36efd417
トラックバック
コメント
管理者にだけ表示を許可する
 

 New Favorite blog Entries 最新記事 37サイト掲載中

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。