filter

InternetExplorer独自のプロパティで、画像やテキストに対して効果フィルターをかけることができます。

ブラウザ

IE5 / IE5.5 / IE6

書式

要素[.class名][#id名]{ filter : 値; }

▲PageTop

指定できる値

値	初期値	意味	備考
alpha()		`style` 透明度が変化する形状を指定しません。【0】線状に透明度が変化します。【1】円状に透明度が変化します。【2】方状に透明度が変化します。【3】 `strtx` 開始x座標を指定します。【数値】 `starty` 開始y座標を指定します。【数値】 `finishx` 終了x座標を指定します。【数値】 `fnishy` 終了y座標を指定します。【数値】 `opacity` 開始座標の透明度を指定します。【0～100】 `finishopacity` 終了座標の透明度を指定します。【0～100】	透明度が100に近づけば近づくほど、透明度が下がります。
blur()		`add` falseの意。Filterを掛ける前の画像を重ねません。【0】 trueの意。Filterを掛ける前の画像を重ねます。【1】 `direction` 影の角度。時計で言う、3時が90度。6時が180度。9時が270度。12時が0度となります。 `strength` ブレの強さを指定できます。
choroma()		`color` 透明にしたい色の色コードを指定します。
dropshadow()		`color` 影に使用する色コードを指定します。 `oFx2x` 元の字から、影の表示場所までのx座標を指定します。【数値】 `oFx2y` 元の字から、影の表示場所までのy座標を指定します。【数値】 `positive()` falseの意。`oFx2x` ・`oFx2y` で指定した影領域の陰になっている部分と、影の領域でありながら、背景と一つになっている部分の色とを反転させます。【0】 trueの意。反転させません【1】
fliph()		もともと表示されているものを左右反転させることができます。	widthプロパティの指定が必要のようです。
flipv()		もともと表示されているものを上下反転させることができます。
glow()		`color` 文字の周りを囲む色の色コードを指定します。 `strength` colorで指定した色の範囲を指定します。【1～255】	widthプロパティの指定が必要のようです。
gray()		白黒表示にすることができます。
invert()		彩度･明度・色相を反転させることができます。
mask()		`color` 画像の透明部分に適用したい色の色コードを指定します。(元々不透明であった部分は、透明になります。)
wave()		`add` falseの意。Filterを掛ける前の画像を重ねません。【0】 trueの意。Filterを掛ける前の画像を重ねます。【1】 `Freq` 波の数を指定します。【数値】 `lightstrength` 光の強さを指定します。【0～100】 `phase` 波の開始位置を指定します。 `strength` 波の強さを指定します。
xray()		白黒表示にして、色を反転させることができます。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      .sample1 {
        filter : alpha(style=1,strtx=0,strty=10,finishx=30,finishy=20,opacity=10,finishopacity=100);
      }
      .sample2 {
        filter : blur(add=0,direction=45,strength=10);
      }
      .sample3 {
        filter : choroma(#dfb000);
      }
      .sample4 {
        filter : dropshadow(color=#cc0066,positive=0);
      }
      .sample5 {
        width : 30%;
        filter : fliph();
      }
      .sample6 {
        filter : flipv();
      }
      .sample7 {
        width : 100%;
        filter : glow(color=#cc3333,strength=5);
      }
      .sample8 {
        filter : gray();
      }
      .sample9 {
        filter : invert();
      }
      .sample10 {
        filter : mask(color=ffcc99);
      }
      .sample11 {
        filter : wave(add=0,Freq=2,lightstrength=50,phase=0,strength=10);
      }
      .sample12 {
        filter : xray();
      }
    </style>
  </head>
  <body>
    標準の画像<br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像"><br>
    <br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample1"><br>
    <div class="sample1">filterサンプル1</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample2"><br>
    <div class="sample2">filterサンプル2</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample3"><br>
    <div class="sample3">filterサンプル3</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample4"><br>
    <div class="sample4">filterサンプル4</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample51"><br>
    <div class="sample5">filterサンプル5</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample6"><br>
    <div class="sample6">filterサンプル6</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample7"><br>
    <div class="sample7">filterサンプル7</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample8"><br>
    <div class="sample8">filterサンプル8</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample9"><br>
    <div class="sample9">filterサンプル9</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample10"><br>
    <div class="sample10">filterサンプル10</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample11"><br>
    <div class="sample11">filterサンプル11</div><br>
    <img src="../../../../images/development/htmlcss/filter-sample.gif" alt="filterサンプル画像" class="sample12"><br>
    <div class="sample12">filterサンプル12</div>
  </body>
</html>

表示結果

標準の画像

filterサンプル1

filterサンプル2

filterサンプル3

filterサンプル4

filterサンプル5

filterサンプル6

filterサンプル7

filterサンプル8

filterサンプル9

filterサンプル10

filterサンプル11

filterサンプル12

▲PageTop

▲

IT専科TOPへ|IT専科について