サイト内検索

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

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

半透明のグラデーション

半透明のグラデーションをかけるフィルタは、alphaプロパティを指定します。
グラデーションの形や透明度、方向などを指定できます。
[使い方]
［スタイルシート]
.sample{
filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0,
finishx=200, finishy=200);
}
［ｂｏｄｙの中］
<img src="../img/sample.jpg" class="sample">
ＩＥのみに対応しています。
[メモ]
style・opacity・finishopacity・startx・starty・finishx・finishyは、
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>

《ｂｏｄｙに直接書いた場合》

グラデーションなし・半透明
画像

<img src="../img/sample.jpg" alt="画像" width="110" height="83"
style="filter: alpha(style=0, opacity=30);">

☆★文字★☆

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


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

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

画像

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

画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90"
style="filter: alpha(style=1, opacity=100, finishopacity=0,
startx=85, starty=0, finishx=85, finishy=140);">

画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90"
style="filter: alpha(style=1, opacity=0, finishopacity=100,
startx=0, starty=0, finishx=170, finishy=140);">

☆★文字★☆

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

Copyright c 2007.10.01 luc All rights reserved.