★このページでは、IEで独自に拡張された設定について解説しています。
動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。
|
初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう VOL13. IE独自拡張による設定 その2 ★ フィルタ1 要素をぼかす（IE5.5以降で有効） ※フィルタそのものはIE4.0以降から有効なものもありますが、指定する書式が違い、IE5.5以前のブラウザは既に一般的でないため、ここではIE5.5以降で有効な書式で解説してゆきます。形式は、どのフィルタも「filter: progid:DXImageTransform.Microsoft.」の後に入る部分を変えることにより、種類を指定します。
要素をぼかして表示するフィルタには、以下の２種類があります。 filter: progid:DXImageTransform.Microsoft.Alpha（詳細設定） filter: progid:DXImageTransform.Microsoft.Blur（詳細設定）
１.「filter: progid:DXImageTransform.Microsoft.Alpha（詳細設定）」 opacity ... スタート地点の不透明度（1〜100） style ... ぼかしの形（0〜3） enabled ... フィルタの実行 （実行...「true」 もしくは「1」 / 実行しない...「false」 もしくは「0」） （但し、enabled はデフォルトが「true」のため、特に指定しなくても実行されます。） 以下は「style=1」の時のみ反映されます。 finishopacity ... 終了地点の不透明度（1〜100） startx ... スタート地点のＸ座標 starty ... スタート地点のＹ座標 finishx ... 終了地点のＸ座標 finishy ... 終了地点のＹ座標
これらの詳細は、下の例のように（）内に「,」で区切って並べます。 filter: progid:DXImageTransform.Microsoft.Alpha（opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=100,finishy=100）;
★同じ写真で、ぼかしの形（style）を変えてみた例★
CSSとHTMLでは、それぞれ以下のように書かれています。
２.「filter: progid:DXImageTransform.Microsoft.Blur（詳細設定）」 maskshadow ... 全体を影にする（「true」 もしくは「1」）か、そのままの状態でぼかす（「false」 もしくは「0」） pixelradius ... ぼかしの量（1〜100、デフォルトは「2」） ※値が大きくなるほど表示領域が大きくなるので注意が必要です。 shadowopacity ... 全体を影にした時（maskshadow=true）の、ぼかしの濃度（0.0〜1.0、デフォルトは「0.75」） ※0.0では要素自体が透明となるため何も表示されなくなり、数値が大きくなるほど色が濃くなって、1.0では黒になります。 enabled ... フィルタの実行 （実行...「true」 もしくは「1」 / 実行しない...「false」 もしくは「0」） （但し、enabled はデフォルトが「true」のため、特に指定しなくても実行されます。）
これらの詳細は、下の例のように（）内に「,」で区切って並べます。 filter: progid:DXImageTransform.Microsoft.Blur(makeshadow=false,pixelradius=3);
「makeshadow=true」とした時、写真だと上の例のように全体が四角い影になりますが、要素によってはそれに応じた図形になる場合もあります。 ★円形の透過GIFの例★
CSSとHTMLでは、それぞれ以下のように書かれています。
以上は画像を使って解説しましたが、段落（ｐ）などの要素にフィルタをかけて文字を装飾することもできます。詳細はこちらをご覧下さい。
初級篇2.VOL13. IE独自拡張による設定・その1 << >> 初級篇2.VOL13. IE独自拡張による設定・その2-2
|
2007.4.1.
←元の写真 （「style=0」は変化なしなので、このまま）
