ウェブランサー

filter - 画像・テキストにフィルタ効果を与える

対応ブラウザ
IE7対応IE8対応Firefox非対応Chrome非対応Opera非対応Safari非対応
適用対象 全ての要素
継承 しない

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

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

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

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)の範囲で指定
filter: blur();
ブレたようにぼかして表示します。
・add=0(false)、1(true):効果を与えた後の要素と元要素を重ねて表示するか否かを指定
・direction=角度:影の方向を時計回りに角度で指定します
・strength=数値:ブレの強さを指定します
filter: chroma();
特定の色を透明にします。 ・color=色:透明にする色を指定します
filter: glow();
文字に光彩を付けて表示します。
・color=色:色の指定
・strength=数値:長さの指定
filter: dropshadow();
文字にぼかしのない影をつけます。
・color=色:影の色を指定します
・offx=数値, offy=数値:影を表示するX座標とY座標の距離を指定します
・positive=0(false)、1(true):影以外の部分の透明・不透明を反転指定
filter: shadow();
テキストにぼかしありの影をつけます。
・color=色:色の指定
・direction=角度:影の方向を時計回りに角度で指定します
filter: fliph();
左右反転にして表示します。
filter: flipv();
上下反転にして表示します。
filter: gray();
グレースケール(白黒)で表示します。
filter: invert();
色を反転表示します。
filter: mask();
マスキングして表示されます。透明部分を指定色で塗りつぶしたり、不透明の部分を透明にします。
filter: wave();
波状に揺らして表示します。
add=0(false)、1(true):効果を与えた後の要素と元要素を重ねて表示するか否かを指定
freq=数値:波の数を指定
lightstrength=0~100:光の強さを指定
phase=0~360:波の開始位置を指定
strength=数値:波の強さを指定
filter: xray();
グレースケールにして明度を反転させた状態で表示します。X線を当てた時のような効果です。

filterの使用サンプル

CSS
.sample01 {
 filter: glow();
 width: 300px;
 margin-bottom: 10px;
}
.sample02 {
 filter: alpha(Style=2, Opacity=100, FinishOpacity=0);
}
XHTML
<div class="text_sample01">
sample01 [filter: glow();]
</div>

<div class="text_sample02">
sample02 [filter: alpha();]<br />
<img src="images/sample.png" alt="" />
</div>
表示確認
sample01 [filter: glow();]
sample02 [filter: alpha();]

filterに関連するCSSプロパティ