filter
解説
画像やテキストに様々なフィルタ効果を与えます。Internet Explorerが独自に追加したプロパティ。DIV SPAN に適用する場合には、width プロパティや height プロパティを同時に指定しなければならない場合もあります。
値: | - |
初期値: | - |
適用対象: | - |
継承: | - |
パーセンテージ: | - |
適用メディア: | 視覚 |
レベル: | MSIE4〜(5.5〜も追加されています) |
参照
alpha() :透明・半透明・透明グラデーション
style | 透明グラデーションのスタイル(0=指定なし、1=線形、2=円形、3=方形)を指定する |
startx, starty, finishx, finish | 透明グラデーションの領域を指定する |
opacity | 開始透明度を0(透明)〜100(不透明)の範囲で指定する |
finishopacit | 終了透明度を0(透明)〜100(不透明)の範囲で指定する |
<div style="background-color: #ff00ff;">
<img src="../img/smp.gif" style="filter: alpha(style=2,opacity=5,finishopacity=95);">
</div>
<div style="width: 100%; filter: alpha(opacity=30);">半透明</div>
blur() :ブレさせる
add | ブレ効果を与えた要素の上に、元の要素を重ねるか(TRUE)、重ねないか(FALSE)を指定する |
direction | 影の方向を角度で指定する |
strength | ブレの強さを指定する |
<img src="../img/smp.gif" style="filter: blur(direction=45, strength=20);">
<div style="width: 100%; filter: blur(direction=45, strength=20);">ぶれ</div>
ぶれ
chroma() :特定の色を透明にする
<img src="../img/smp.gif" style="filter: chroma(color=#000000);">
dropshadow() :テキストに影をつける(ぼかしのない影)
color | 影の色を指定する |
offx | 影を表示するX座標の距離を指定する |
offy | 影を表示するY座標の距離を指定する |
positive | 0を指定すると影の領域内の影部分と影以外の部分の透明・不透明を反転させる |
<div style="width: 100%; filter: dropshadow(color=#ff0000,offx=5,offy=5,positive=1);">ドロップシャドウ</div>
<div style="width: 100%; filter: dropshadow(color=#ff0000,offx=5,offy=5,positive=0);">ドロップシャドウ</div>
shadow() :テキストに影をつける(連続してぼかされた影)
color | 影の色を指定する |
direction | 影の方向を角度で指定する |
<div style="width: 100%; filter: shadow(color=#ff0000,direction=45);">シャドウ</div>
fliph() :領域を左右反転する
<img src="../img/smp.gif" style="filter: fliph();">
<div style="width: 100%; filter: fliph();">領域を左右反転</div>
領域を左右反転
flipv() :領域を上下反転する
<img src="../img/smp.gif" style="filter: flipv();">
<div style="width: 100%; filter: flipv();">領域を上下反転</div>
領域を上下反転
glow() :テキストに炎効果
color | 炎の色を指定する |
strength | 炎の長さを指定する |
<div style="width: 100%; filter: glow();">炎効果</div>
gray() グレースケールで表示する
<img src="../img/smp.gif" style="filter: gray();">
<div style="width: 100%; filter: gray();">グレースケール</div>
グレースケール
invert() :色を反転する
<img src="../img/smp.gif" style="filter: invert();">
<div style="width: 100%; filter: invert();">色を反転</div>
色を反転
mask() :透明部分を指定色で塗りつぶし、不透明の部分を透明にする
<img src="../img/smp.gif" style="filter: mask(color=#ccccff);">
<div style="width: 100%; filter: mask(color=#ccccff);">マスク効果</div>
wave() :波状にする
add | 波効果を与えた要素の上に、元の要素を重ねるか(TRUE)重ねないか(FALSE)を指定する |
freq | 波の数を指定する |
lightstrength | 光の強さを指定する |
phase | 波の開始位置を指定する |
strength | 波の強さを指定する |
<img src="../img/smp.gif" style="filter: wave(freq=3,lightstrength=50,strength=5);">
<div style="width: 100%; filter: wave(freq=1,strength=3,add=true);">波効果</div>
波効果
xray() :X線効果
<img src="../img/smp.gif" style="filter: xray();">
<div style="width: 100%; filter: xray();">X線効果</div>
X線効果