|
IE は開発の初期段階では頭を悩ませましたが、他のブラウザとは異なります。他のブラウザがサポートしている機能をサポートしていないだけでなく、他のブラウザがサポートしていない機能もサポートしています。今日は、その機能の 1 つであるフィルターについて簡単に紹介します。
CSS フィルターは主に、画像のさまざまな特殊効果を実現するために使用されます。これは、Web サイト制作において非常に魔法のような役割を果たします。 CSS フィルターを使用すると、Web サイトをより美しくすることができます。CSS では、フィルター属性はフィルターの意味を表し、テキスト、画像、表のフィルター効果を設定できます。
構文: STYLE={"filter:filtername(fparameter1,fparameter2...)}
注: Filtername はフィルターの名前、fparameter1、fparameter2 などはフィルターのパラメーターです。
13 CSS フィルター効果 1. フィルター: 彩度 - 特殊な色を透明にします。
構文: STYLE="filter:Chroma(Color=color)"
ラベル: 色: #rrggbb 形式、任意。
2. フィルター: ぼかし - 高速移動効果、つまりぼかし効果を作成します。
構文: STYLE="filter:Blur(Add=追加、Direction=方向、Strength=強度)"
注: 追加: 通常は 1 または 0。方向: 角度、0 ～ 315 度、ステップ長は 45 度。強度: 効果の増加値、通常は 5。
3. フィルター: FlipV - 垂直方向の鏡像を作成します。
構文: STYLE="filter:FlipV"
4. フィルター: アルファ - 透明度のレベルを設定します。構文: STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
注: 不透明度: 開始値。範囲は 0 ～ 100。0 は透明、100 は元の画像。FinishOpacity: ターゲット値。スタイル: 1、2、または 3。StartX: 任意の値。StartY: 任意の値 5。フィルター: FlipH - 水平方向のミラー イメージを作成します。
構文: STYLE="filter:FlipH"
6. フィルター: グロー - 近くのオブジェクトのエッジにグローを追加します。
構文: STYLE="filter:Glow(Color=色,Strength=強度)"
ラベル: 色: 発光色; 強度: 強度 (0-100)
7.フィルター:マスク - オブジェクトに透明なマスクを作成します。
構文: STYLE="filter:Mask(Color=color)"
8. フィルター: フィルター: X 線 - オブジェクトが X 線で照らされたように見えます。
構文: STYLE="filter:Xray"
9.フィルター: 反転——色を反転します。
構文: STYLE="filter:Invert"
10.Filter:DropShadow -- オブジェクトの固定された影を作成します。
構文: STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
ラベル: 色: #rrggbb 形式、任意。Offx: X 軸のオフセット値。Offy: Y 軸のオフセット値。正: 1 または 0。
11. フィルター: グレー - 画像をグレースケール化します。
構文: STYLE="filter:Gray"
12. フィルター: 波 - 波紋効果。
構文:filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
ラベル: Add: 通常は 1 または 0、Freq: 変形値、LightStrength: 変形パーセンテージ、Phase: 角度変形パーセンテージ、Strength: 変形強度。
13.shadow--オフセット固定シャドウを作成します。
構文:filter:Shadow(Color=色,Direction=方向)
ラベル: 色: #rrggbb 形式、方向: 角度、0 ～ 315 度、ステップ長は 45 度。
CSS フィルターを使用する際に注意すべき点の 1 つは、現在の Web サイトのレイアウトでは、フィルターが div に添付されることが多いことです。HTML コードで div の id を単に設定しても、フィルターは機能しません。スタイルまたは CSS で id 属性を定義する必要があります。そうしないと、フィルターは機能しません。
ウェブサイトを作成するときに、PPT ドキュメントのように画像を自由に切り替えるには、たった 1 文のコードだけが必要です。とても簡単です!変換する前に、次の 3 つの基本コードを理解する必要があります。
回転: 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)"
ハイライトレビュー: ウェブサイト構築のための 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=horizontal)
中央の左と右を拡大します: progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)
ランダムな水平線: progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)
ランダムな垂直線: progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)
上部と下部の中央部分を縮小します: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)
標準グラデーション変換: BlendTrans (enabled=true、percent=10)
調整可能なグラデーション変換: progid:DXImageTransform.Microsoft.Fade(enabled=true,overlap=1.0)
右下に挿入: progid:DXImageTransform.Microsoft.Inset(enabled=true)
非表示のストレッチ: 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=clock)
階段左下: 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)
Z 字型のジグザグ: progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)
H ブラインド: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down)
:progid:DXImageTransform.Microsoft.Blinds(バンド=6、方向=上)
:progid:DXImageTransform.Microsoft.Blinds(バンド=60、方向=下)
:progid:DXImageTransform.Microsoft.Blinds(バンド=60、方向=上)
V ブラインド: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)
:progid:DXImageTransform.Microsoft.Blinds(バンド=6、方向=左)
:progid:DXImageTransform.Microsoft.Blinds(バンド=60、方向=右)
:progid:DXImageTransform.Microsoft.Blinds(バンド=60、方向=左)
スライドの入れ替え: progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)
:progid:DXImageTransform.Microsoft.Slide(スライドスタイル=スワップ、バンド=20)
プッシュ スタイルのスライド: progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)
:progid:DXImageTransform.Microsoft.Slide(スライドスタイル=プッシュ、バンド=20)
非表示のスライド: progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)
:progid:DXImageTransform.Microsoft.Slide(スライドスタイル=非表示、バンド=20)
前方にぼかし: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)
:progid:DXImageTransform.Microsoft.GradientWipe(グラデーションサイズ=0.5、ワイプスタイル=0、モーション=逆)
:progid:DXImageTransform.Microsoft.GradientWipe(グラデーションサイズ=0.5、ワイプスタイル=1、モーション=前方)
:progid:DXImageTransform.Microsoft.GradientWipe(グラデーションサイズ=0.5、ワイプスタイル=1、モーション=逆)
垂直チェッカーボード: progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)
:progid:DXImageTransform.Microsoft.CheckerBoard(方向=左、正方形X=12、正方形Y=12)
:progid:DXImageTransform.Microsoft.Checkerboard(方向=右、正方形X=2、正方形Y=2)
:progid:DXImageTransform.Microsoft.Checkerboard(方向=左、正方形X=2、正方形Y=2)
:progid:DXImageTransform.Microsoft.Checkerboard(方向=右、正方形X=60、正方形Y=60)
:progid:DXImageTransform.Microsoft.Checkerboard(方向=左、正方形X=60、正方形Y=60)
水平チェッカーボード: progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)
:progid:DXImageTransform.Microsoft.CheckerBoard(方向=上、正方形X=12、正方形Y=12)
:progid:DXImageTransform.Microsoft.Checkerboard(方向=下、squaresX=2、squaresY=2)
:progid:DXImageTransform.Microsoft.Checkerboard(方向=上、squaresX=2、squaresY=2)
:progid:DXImageTransform.Microsoft.Checkerboard(方向=下、正方形X=60、正方形Y=60)
:progid:DXImageTransform.Microsoft.Checkerboard(方向=上、正方形X=60、正方形Y=60)
|
