【filter】テキストや画像にフィルタを適用する

filter(フィルタ)プロパティでは、webページ上でテキストや画像に色々な特殊効果を適用することができます。 例えばCSSを使ってフィルタを適用すると、ぼかしや影、半透明といった効果を設定することが可能です。

ただしfilterプロパティはInternet Explorer(IE)が独自に追加した機能なので、表示できるブラウザが限られています。 ですがCSSに設定しておくことで、複数のテキストや画像に同じ特殊効果を簡単に指定することができます。

フィルタはIE4.0以上のブラウザで利用することができますが、フィルタを動作させるためにはDirectXが必要です。

※DirectXとは、Windowsのマルチメディア機能を強化するための技術です。Windows98以降のosには初期の状態でDirectXが搭載されています。

またIE5.5からは書式の指定方法が変わり、使用できる視覚効果もIE4以上で利用できる効果とは異なっています。

※フィルタはIE10で廃止されています。

書式

  • filter:progid:DXImageTransform.Microsoft.フィルタ名(パラメータ) ……… IE5.5以上の書式
  • filter : フィルタ名(パラメータ) ……… IE4以上の書式

IE5以上の場合ですが「filter:progid:DXImageTransform.Microsoft.」までは、全てのフィルタで共通となっています。 その後に続く「フィルタ名」の部分にはShadowなどのフィルタ名、パラメータの部分には「Color=#fff」などのようにフィルタごとに必要なパラメータと値を指定します。

パラメータは()内に「パラメータ名=値」というように記述し、複数のパラメータを指定する場合はカンマ「,」で区切って指定します。

なおフィルタを適用するには、適用する要素に対してwidthプロパティやheightプロパティで幅と高さを指定しておくか、position: absoluteを設定して表示位置を指定しておく必要があります。

ただし画像など高さと幅が決まっている要素には指定する必要はありません。

静的な視覚効果のフィルタ(IE5.5以上、一部IE4以上で利用可)

  • Blur() ………… 要素をぼかして表示
  • DropShadow() ………… ぼかしがない影の表示
  • Shadow() ………… ぼかしのある影を表示
  • BasicImage() ………… 透過・反転・回転・グレースケール等の視覚効果を設定
  • invert() ………… 色の反転(明度・彩度・色相)
  • xray() ………… グレースケールにして反転
  • Alpha() ………… 透過して表示する
  • Chroma() ………… 指定した色を透明にする
  • fliph() ………… 左右に反転する
  • flipv() ………… 上下の反転
  • MaskFilter() ………… 指定の色でマスクをかける
  • Glow() ………… グロー効果を与える
  • Emboss() ………… 浮彫(エンボス)で表示する
  • Engrave() ………… 掘り下げて(エングレープ)表示する
  • MotionBlur() ………… ぶれさせる
  • Wave() ………… 波状に歪める
  • Pixelate() ………… モザイクをかける
  • Matrix() ………… 傾けて表示する
  • Gradient() ………… グラデーションで表示する
  • AlphaImageLoader() ………… 画像を背景と内容の間に表示
  • Light() ………… 光を当てたような効果
  • ICMFilter() ………… カラーマネージメントシステムで色調管理
  • Compositor() ………… 要素を合成して表示

動的な視覚効果のフィルタ(IE5.5以上)

  • Barn() ………… 引き戸を開閉するように切り替える
  • Blinds() ………… ブラインドのように切り替える
  • CheckerBoard() ………… チェック模様のように切り替える
  • Fade() ………… フェードインアウト
  • GradientWipe() ………… グラデーションするように切り替える
  • Inset() ………… 次の画面が差し込まれるように切り替える
  • Iris() ………… 瞳の虹彩が収縮するように切り替える
  • RadialWipe() ………… 円を描いて切り替える
  • RandomBars() ………… ランダムな幅の線を描いて切り替える
  • RandomDissolve() ………… 溶けるように切り替える
  • Slide() ………… スライドして切り替える
  • Spiral() ………… 渦巻き状に切り替える
  • Stretch() ………… 次の画面を引き伸ばすように切り替える
  • Strips() ………… 前の画面を隅から刻んで切り替える
  • Wheel() ………… ホイールが回転するように切り替える
  • Zigzag() ………… ジグザグに折り返し切り替える

※動的な視覚効果はスクリプトと組み合わせる事で色々な表示パターンを可能にします。 表示例など、詳しくは下記microsoft社のページをご覧ください。

https://msdn.microsoft.com/

対応ブラウザなどのデータ

プロパティ 独自拡張プロパティ
対応ブラウザ Internet Explorer4~

関連情報