HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


グラデーション効果(CSSフィルター)

CSSの書き方

filter:alpha(opacity= ,finishopacity= ,style= ,startx= ,starty= ,finishx= ,finishy= );

CSSの詳細情報
プロパティ名 filter:alpha(); 読み方 フィルター・アルファ
初期値 すべての属性で「0」 意味 透明化グラデーション
数値
対象 body/button/div/img/input/marquee/
span/table/td/textarea/tfoot/th/thead/tr
※ただし、spanとdiv要素は「width」、「height」プロパティが指定されているか、「position:absolute;」が指定されていなければならない。
CSSレベル IE独自 対応ブラウザ Windows MAC
継承 する IE 5.0以上 --

解説

「filter:alpha();」はグラデーションしながら透明化させるフィルターです。各項目と設定については以下の表をご覧ください。なお、設定項目の一部は省略できます。

設定項目 内容
opacity 開始点の不透明度 0〜100までの整数(0が透明。100が不透明)
finishopacity 終了点の不透明度 0〜100までの整数(0が透明。100が不透明)
style グラデーションの形 0は一定、1は直線、2は放射線、3は長方形
startx 不透明度の開始X座標 正の整数(0〜)
starty 不透明度の開始Y座標 正の整数(0〜)
finishx 不透明度の終了X座標 正の整数(0〜)
finishy/td> 不透明度の開始Y座標 正の整数(0〜)

CSS/HTMLサンプル

img { filter:alpha(opacity=90 ,finishopacity=20 ,style=1) ; }

alphaフィルターをIMG要素に サンプル