フィルターはマイクロソフトのCSSへの独自拡張で、IE4.0以降のブラウザで表示することができます。面倒なスクリプトなどを使わずとも、スタイルシートからfilterプロパティを効果を与えたい要素に加えることによって、簡単に文字や画像に特殊な効果を加えることができます。詳しくはMSのVisual Filters and Transitions Referenceを参照してください。
フィルターを要素に加える場合、一般的な書式は以下のようになります。
<ELEMENT STYLE = "filter: filterName(sProperties)" ... >
フィルター効果を加えられる要素は BODY, BUTTON, DIV, IMG, INPUT, MARQUEE, SPAN, TABLE, TD, TEXTAREA, TH
効果の及ぶ範囲を指定するためにwidth、heightのプロパティを設定します。
スクリプトを使ってこれらのプロパティを操作すればフィルター効果に様々な動きを付けることができます。その場合、filterのプロパティにアクセスするには、オブジェクトのfilters・コレクションを用います。(一つの要素に複数のフィルター効果を付けることが可能なのです)
例えば以下のようなDIV要素にflipH効果のフィルターが付けられているとします。
<div id="box" style="width:200;height:100;font-size:20;
filer:flipH();">
このflipHの効果の有無を決めるプロパティenableの値をfalseにして、効果を付けないようにする場合を考えてみます。(プロパティenableのデフォルト値はtrueです) コレクションfiltersのメソッドitem()を使えば
box.filters.item(0).enabled = false;
これはコレクションfiltersのメンバーとして以下のような書き方もできます。
box.filters[0].enabled = false;
またフィルター名を表記して指定することも可能です。
box.filters.flipH.enable = false; または box.filters["flipH"].enable = false;
300px×300pxの黒いボックスにalpha効果をかけています。不透明さの始まりの点a(0, 0)の不透明度は0で、終点b(300, 300)の不透明度が100に設定され、その間を線状パターンで不透明度を変えグラディエーションしています。座標はパーセントに換算した値を指定します。
<div id="box_alpha" class="sample"
style="background-color:#000;width:300;height:300;
filter:alpha(opacity=0,startX=0,startY=0,finishOpacity=100,
finishX=100,finishY=100,style=1);">
</div>
下の値を変えてみてください。
| opacity = | 0から100までの数字です |
|
| startX = | ||
| startY = | ||
| finishOpacity = | ||
| finishX = | ||
| finishY = | ||
| style = |
|
動いているような影をつけます。
<div style="filter:blur(add=1,direction=135,strength=10);
width:300;height:150;font-size:90;font-weight:bold;
color:#34A;">
SAMPLE
</div>
| strength = | 1から100までの整数 | |
| direction = | 0からの45刻みの整数(例えば22は0に、23は45として解釈されます) |
DIV要素にborderを付けるとそれにも影が付きます。
指定された色の部分を透明にします。
外側のDIV要素に背景画像がついています。内側のDIV要素内の指定した色(#A43)の文字"A"が透明になります。
<div style="background-image:url(../css/bgimg.gif);">
<div style="filter:chroma(color=#A43);
width:300;height:150;font-size:90;font-weight:bold;
color:#34A;background-color:#EEE">
S<span style="color:#A43">A</span>MPLE
</div>
</div>
オブジェクトのカラーパレットの色情報を落として、グレイスケールで表示する。
立体的な影を付けます。