ieフィルターコレクション_HTML/Xhtml_Webページ制作

IE は、開発の初期段階で私たちに頭痛の種を与えました。それは、他の機能がサポートしているものではなく、他の機能がサポートしていないものでもあります。今日は、その機能の 1 つであるフィルターについて簡単に紹介します。

CSSフィルターは主に画像にさまざまな特殊効果を実現するために使用されます。それはウェブサイト制作において非常に魔法の役割を果たします。 CSS フィルターを使用して Web サイトをより美しくすることができます。 CSS では、フィルター属性はテキスト、画像、表のフィルター効果を設定できます。
構文: STYLE={"filter:filtername(fparameter1,fparameter2...)}
注: Filtername はフィルターの名前、fparameter1、fparameter2 などはフィルターのパラメーターです。
13種類のCSSフィルター ミラー効果
1.フィルター：chroma - 特殊な色を透明にします。
構文：STYLE="filter:Chroma(Color=color)"
注釈：color:#rrggbb形式、任意.
2. フィルター: ブラー - 高速移動効果、つまりブラー効果を作成します。
構文: STYLE="filter:Blur(Add=add,Direction=方向,Strength=strength)"。
注釈: 追加: 通常は 1、または 0; 方向: 角度、0 ～ 315 度、ステップは 45 度; 強度: 効果の増加の値、通常は 5 で十分です。 --垂直ミラーイメージを作成します。
構文: STYLE="filter:FlipV"
4. フィルター: alpha -- 透明度レベルを設定します
構文: STYLE="filter:Alpha(Opacity=opacity,FinishOpacity =finishopacity,Style=style ,StartX = startX, StartY = startY, FinishX =finish スタイル: 1 または 2 または 3; StartX: 任意の値; StartY: 任意の値
5. フィルター: FlipH - 水平方向のミラー イメージを作成します。
構文: STYLE="filter:FlipH"
6. Filter:glow -- 近くのオブジェクトの外側にグローを追加します。
構文: STYLE="filter:Glow(Color=color,Strength=strength) )"
注釈: カラー: グロー カラー; 強度: 強度 ( 0-100)
7. Filter:mask -- オブジェクト上に透明なマスクを作成します。
構文: STYLE="filter:Mask( Color=color)"
8. フィルター: Filter :Xray -- オブジェクトを X 線で照らされているように見せます。
構文: STYLE="filter: :Invert"
10. フィルター: DropShadow -- オブジェクトの固定シャドウを作成します。
構文: STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
マーキング: カラー: #rrggbb 形式、任意; Offx: X 軸の偏差値; Offy: Y 軸の偏差値 正: 1 または 0。
11. フィルター: 画像をグレースケールにします。
構文: STYLE="フィルター:Gray"
12. フィルター: 波 - リップル効果。
構文: filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase, Strength=strength)
注釈: 追加: 通常は 1、または 0、Freq: 変形値、LightStrength: 変形率、Strength: 変形強度。
13.shadow -- オフセットを作成します。
構文: filter:Shadow( Color=color,Direction=direction)
注釈: カラー: #rrggbb 形式; 方向: 角度、0 ～ 315 度、ステップ サイズは 45 度です。
CSS フィルターを使用するときに注意すべき点が 1 つあります。現在の Web サイトのレイアウトでは、フィルタが div に付加されていることがよくあります。HTML コードで div に id を設定しただけでは、フィルタは効果がありません。この id 属性は style または css で定義する必要があります。そうしないと効果がありません。仕事。

たった一文のコードで、Webサイト作成時にPPT文書のように画像を自由に切り替えることができます とても簡単です！変換する前に、まず 3 つの基本コードを理解する必要があります。
Rotation: style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"
背景色の削除: style="filter:Chroma( Color= #000000)"
グラデーション カラーを設定します: style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolorstr=#ffff00,gradientType= 1) "
素晴らしいレビュー: Web サイト制作のための CSS フィルター効果のコレクション
以下は画像変換フィルターのコレクションです。友達に役立つことを願っています~! ！ ！
ランダム変換: progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)
正方形グラデーション: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)
正方形グラデーション 大: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)
交差的に小さくなる: progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)
交差的に大きくなる: progid : DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)
星の形が大きくなる: progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)
星の形が小さくなる: progid:DXImageTransform Microsoft.Iris(irisstyle=star,motion=in)
円が大きくなります: progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)
円が小さくなります: progid:DXImageTransform.Microsoft Iris(irisstyle=circle,motion=in)
ダイヤモンドが小さくなります: progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)
ダイヤモンドが大きくなります: progid:DXImageTransform.Microsoft.Iris (irisstyle= Diamond,motion=out)
プラス記号が大きくなります: progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
プラス記号が小さくなります: progid:DXImageTransform.Microsoft.Iris (irisstyle=plus, motion=in)
上方向に消去：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)
下方向に消去：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction =down )
左に消去：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)
右に消去：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right) )
左右の中央部分を縮小: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)
ランダムにディゾルブ: progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)
展開中央部分を上下に拡大します: progid:DXImageTransform .Microsoft.Barn(motion=out,orientation=horizo​​ntal)
中央部分を左右に展開します: progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)
ランダムな水平線: progid:DXImageTransform.Microsoft.RandomBars(orientation=horizo​​ntal)
ランダムな垂直線: progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)
上下中央の縮小: progid:DXImageTransform。 Microsoft.Barn(motion=in, Orientation=horizo​​ntal)
標準のグラデーション変換: BlendTrans(enabled=true,percent=10)
調整可能なグラデーション変換: progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap= 1.0)
右下に挿入: progid:DXImageTransform.Microsoft .Inset(enabled=ture)
ストレッチを非表示: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)
ストレッチをプッシュ: progid:DXImageTransform .Microsoft.Stretch(stretchstyle=push)
回転ストレッチ: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)
カウンター クロック: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)
放射線: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)
モザイク効果: progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)
クロック: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=時計)
ラダー左下: progid:DXImageTransform.Microsoft.Strips(motion=leftdown )
ラダーの右上: progid:DXImageTransform.Microsoft.Strips(motion=rightup)
ラダーの左上: progid :DXImageTransform.Microsoft.Strips(motion=leftup)
ラダーの右下: progid:DXImageTransform.Microsoft.Strips(motion=rightdown)
スパイラル収縮: progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20) ,gridSizeY=20)
風車の回転: progid:DXImageTransform.Microsoft.Wheel(spokes=20)
ジグザグ: progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)
H ブラインド: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down)
: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up)
：progid:DXImageTransform.Microsoft.Blinds(bands= 60,direction=down)
：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction= up)
Vブラインド：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)
：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)
：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)
交换式幻灯片：progid:DXImageTransform.Microsoft .Slide(slidestyle=swap,bands=1)
：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)
推動式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=push) ,bands=1)
：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)
隐藏式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)
：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)
模糊推进：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)
：progid :DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)
：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)
：progid:DXImageTransform .Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)
纵棋向盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)
：progid:DXImageTransform .Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)
：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)
：progid:DXImageTransform.Microsoft .Checkerboard(direction=left,squaresX=2,squaresY=2)
：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)
：progid:DXImageTransform.Microsoft.Checkerboard (direction=left,squaresX=60,squaresY=60)
横向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)
：progid:DXImageTransform.Microsoft.CheckerBoard (direction=up,squaresX=12,squaresY=12)
：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)
：progid:DXImageTransform.Microsoft.Checkerboard(direction =up,squaresX=2,squaresY=2)
：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)
：progid:DXImageTransform.Microsoft.Checkerboard(direction=up) ,squaresX=60,squaresY=60)