filter:画像・テキストにフィルタ効果を与える
適用対象 | 全ての要素 |
継承 | しない |
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();]
