filter･･･画像・テキストにフィルタ効果を与える（IE独自の仕様）
   
filterプロパティは、Internet Explorerが独自に追加したプロパティで、指定する値により、画像やテキストに様々なフィルタ効果を与えます。
filterプロパティを
<DIV>・
<SPAN>に適用する場合には、
widthプロパティや
heightプロパティを同時に指定する必要があります。
filterプロパティを使用したページを、Netscape Communicator 4.xなどの
filterプロパティに対応していないブラウザで表示すると表示が崩れることがあるので注意してください。
Internet
Explorerで表示させる場合にも、レンダリングに時間が掛かることがあります。
また、タグの閉じ忘れ等の記述ミスをするとブラウザ自体が閉じてしまうことがあります。
filterプロパティを使用する際には注意してください。
※filterプロパティを適用していない画像
- alpha()
- 透明・半透明・透明グラデーションにします。
- style=0,1,2,3
- 透明グラデーションのスタイル（0=指定なし、1=線形、2=円形、3=方形）を指定します。
- startx=数値, starty=数値, finishx=数値, finishy=数値
- 透明グラデーションの領域を指定します。
- opacity=0～100
- 開始透明度を0（透明）～100（不透明）の範囲で指定します。
- finishopacity=0～100
- 終了透明度を0（透明）～100（不透明）の範囲で指定します。
<img src="../images/img001.gif" alt=" "
style="filter: alpha(style=1,opacity=30,finishopacity=100);">
<div style="width: 100%; filter: alpha(opacity=30);">alpha半透明</div>
alpha半透明
- blur()
- ブレさせます。
- add=0（false）,1（true）
- ブレ効果を与えた要素の上に、元の要素を重ねるかどうかを指定します。
- direction=角度
- 影の方向を角度で指定します。時計回りに上が0、右が90、下が180、左が270となります。
- strength=数値
- ブレの強さを指定します。
<img src="../images/img001.gif" alt=" "
style="filter: blur(direction=90);">
<div style="width: 100%; filter: blur(add=1,direction=135);">blurブレ</div>
blurブレ
- chroma()
- 特定の色を透明にします。
- color=色
- 透明にする色を指定します。
<img src="../images/img001.gif" alt=" "
style="filter: chroma(color=#ffffcc);">
<div style="width: 100%; filter: chroma(color=#ffffcc);">chroma特定<span style="color:#ffffcc;">の</span>色を透過</div>
chroma特定の色を透過
- dropshadow()
- テキストに影をつけます。shadow()の影と異なり、ぼかしのない影をつけます。
- color=色
- 影の色を指定します。
- offx=数値, offy=数値
- 影を表示するX座標とY座標の距離を指定します。
- positive=0（false）,1（true）
- 0を指定すると、影の領域内の影部分と影以外の部分の透明・不透明を反転させます。
<div style="width: 100%; filter: dropshadow(color=#0000ff,offx=3,offy=3,positive=1);">dropshadowドロップシャドウ</div>
<div style="width: 100%; filter: dropshadow(color=#0000ff,offx=3,offy=3,positive=0);">dropshadowドロップシャドウ</div>
dropshadowドロップシャドウ
dropshadowドロップシャドウ
- fliph()
- 領域を左右反転します。
<img src="../images/img001.gif" alt=" "
style="filter: fliph();">
<div style="width: 100%; filter: fliph();">fliph領域を左右反転</div>
fliph領域を左右反転
- flipv()
- 領域を上下反転します。
<img src="../images/img001.gif" alt=" "
style="filter: flipv();">
<div style="width: 100%; filter: flipv();">flipv領域を上下反転</div>
flipv領域を上下反転
- glow()
- テキストに炎（光）につつまれたような効果をつけます。
- color=色
- 炎（光）の色を指定します。
- strength=数値
- 炎（光）の長さを指定します。
<div style="width: 100%; filter: glow();">glow炎（光）につつまれたような効果</div>
glow炎（光）につつまれたような効果
- gray()
- グレースケールで表示します。
<img src="../images/img001.gif" alt=" "
style="filter: gray();">
<div style="width: 100%; filter: gray();">grayグレースケール</div>
grayグレースケール
- invert()
- 色（色相・明度・彩度）を反転します。
<img src="../images/img001.gif" alt=" "
style="filter: invert();">
<div style="width: 100%; filter: invert();">invert色（色相・明度・彩度）を反転</div>
invert色（色相・明度・彩度）を反転
- mask()
- 透明部分を指定色で塗りつぶし、不透明の部分を透明にします。
- color=色
- 塗りつぶす色を指定します。
<img src="../images/img001.gif" alt=" "
style="filter: mask(color=#0000ff);">
<div style="width: 100%; filter: mask(color=#0000ff);">mask</div>
mask
- shadow()
- テキストに影をつけます。dropshadow()の影と異なり、連続してぼかされた影をつけます。
- color=色
- 影の色を指定します。
- direction=角度
- 影の方向を角度で指定します。時計回りに上が0、右が90、下が180、左が270となります。
<div style="width: 100%; filter: shadow(color=#0000ff,direction=135);">shadow影</div>
shadow影
- wave()
- 波状にします。
- add=0（false）,1（true）
- 波効果を与えた要素の上に、元の要素を重ねるかどうかを指定します。
- freq=数値
- 波の数を指定します。
- lightstrength=0～100
- 光の強さを指定します。
- phase=0～360
- 波の開始位置を指定します。
- strength=数値
- 波の強さを指定します。
<img src="../images/img001.gif" alt=" "
style="filter: wave(freq=3,lightstrength=50,strength=5);">
<div style="width: 100%; filter: wave(freq=1,strength=2);">wave波</div>
wave波
- xray()
- X線を当てたような効果（グレースケールにして反転）にします。
<img src="../images/img001.gif" alt=" "
style="filter: xray();">
<div style="width: 100%; filter: xray();">xrayX線</div>
xrayX線
filter･･･････････画像・テキストにフィルタ効果を与える（IE独自の仕様）
zoom･･････････拡大・縮小表示する（IE独自の仕様）
|
