filter 【フィルタ効果】

[IE5] [IE6] [IE7]

filterプロパティは、画像やテキストに様々な効果を与える事が出来ます。
filterプロパティは、Internet Explorerが独自に追加したプロパティです。

フィルタ効果には、静的なものが18種類、動的なものが17種類あります。しかし、対応していないブラウザではレイアウトが崩れたり、バグの原因になってしまうものなどがあり、実用するにはあまり現実的ではありません。どうしても使いたい効果がある場合は、JavaScriptで同じようなものがないか調べた方がいいのかも知れませんね。あくまでオプション的に使いましょう。

divやspanにfilterプロパティを指定する際には、widthプロパティheightプロパティを合わせて指定しましょう。

alpha()
透明、半透明、透明グラデーションにします。
・style=0,1,2,3:透明グラデーションのスタイル(0=指定なし、1=線形、2=円形、3=方形)
・startx=数値, starty=数値, finishx=数値, finishy=数値:透明グラデーションの領域
・opacity=0〜100;開始透明度の指定(0〜100)の範囲で指定
・finishopacity=0〜100:終了透明度の指定(0〜100)の範囲で指定

blur()
ブレたようにぼかして表示します。
・add=0(false)、1(true):効果を与えた後の要素と元要素を重ねて表示するか否かを指定
・direction=角度:影の方向を時計回りに角度で指定します。
・strength=数値:ブレの強さを指定します。

chroma()
特定の色を透明にします。
・color=色:透明にする色を指定します。

glow()
文字に光彩を付けて表示します。
・color=色:色の指定
・strength=数値:長さの指定

dropshadow()
文字にぼかしのない影をつけます。
・color=色:影の色を指定します。
・offx=数値, offy=数値:影を表示するX座標とY座標の距離を指定します。
・positive=0(false)、1(true):影以外の部分の透明・不透明を反転指定。

shadow()
テキストにぼかしありの影をつけます。
・color=色:色の指定
・direction=角度:影の方向を時計回りに角度で指定します。

fliph()
左右反転にして表示します。

flipv()
上下反転にして表示します。

gray()
グレースケール(白黒)で表示します。

invert()
色を反転表示します。

mask()
マスキングして表示されます。透明部分を指定色で塗りつぶしたり、不透明の部分を透明にします。

wave()
波状に揺らして表示します。
add=0(false)、1(true):効果を与えた後の要素と元要素を重ねて表示するか否かを指定
freq=数値:波の数を指定
lightstrength=0〜100:光の強さを指定
phase=0〜360:波の開始位置を指定
strength=数値:波の強さを指定

xray()
グレースケールにして明度を反転させた状態で表示します。X線を当てた時のような効果です。

filterプロパティの記述の仕方
<div style=" filter: 効果の種類(値); width: ***px; height: ***px;">内容</div>

filterの使用例

CSSファイル

.sample001 {
 filter: glow();
 width: 300px;
 height: 50px;
 margin: 10px;
}

HTMLソース

<div class="sample001">
フィルター効果サンプル
</div>

表示すると

フィルター効果サンプル

フィルター・効果関連項目

filter 画像・テキストにフィルタ効果を与える 
zoom 拡大・縮小表示する 

戻る

TOP