サイト内検索

...スタイルシート(css)...

スタイルシート・フィルタ

半透明のグラデーション

半透明のグラデーションをかけるフィルタは、alphaプロパティを指定します。
グラデーションの形や透明度、方向などを指定できます。
[使い方]
[スタイルシート]
.sample{
filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0,
finishx=200, finishy=200);
}
[bodyの中]
<img src="../img/sample.jpg" class="sample">
IEのみに対応しています。
[メモ]
style・opacity・finishopacityは、
W3C・CSS検証サービスでは、推奨されていません。
プロパティ名 説明
style グラデーションのスタイル
0=グラデーションなし
1=線形
2=円形
3=長方形
opacity 開始透明度0(透明)〜100(不透明)
finishopacity 終了透明度0(透明)〜100(不透明)
startx
starty
開始位置(線形で使用可能です。)
startx.....X座標
starty.....Y座標
finishx
finishy
終了位置(線形で使用可能です。)
finishx.....X座標
finishy.....Y座標

サンプル

フィルタを使用していない状態
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90">

☆★文字★☆

<div style="font: bold 170% sans-serif; width: 100%;">
☆★文字★☆
</div>

《bodyに直接書いた場合》

円形グラデーション・方向を決める
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90"
style="filter: alpha(style=2, opacity=100);">

画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90"
style="filter: alpha(style=2, opacity=0, finishopacity=100);">

☆★文字★☆

<div style="font: bold 170% sans-serif; width: 10em;
filter: alpha(style=2, opacity=100);
"
>
☆★文字★☆
</div>


長方形グラデーション・方向を決める
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90"
style="filter: alpha(style=3, opacity=100);">

I画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90"
style="filter: alpha(style=3, opacity=0, finishopacity=100);">

☆★文字★☆

<div style="font: bold 170% sans-serif; width: 10em;
filter: alpha(style=3, opacity=100);"
>
☆★文字★☆
</div>


Copyright c 2007.10.01 luc All rights reserved.