CSS3のフィルター効果例を詳しく解説

最近のプロジェクトはすべて CSS3 に関するものですが、IE はそれをサポートしていません。調べてみると、W3C がフィルターを標準化しているようです。思い出してください。 IEを使用するには、興味のある友人がそれについて学ぶことができます。この記事が役立つことを願っています

最近のプロジェクトはすべてCSS3に対応していますが、邪悪なIEはCSS3をサポートしていないことがわかりました。 IE のフィルターは非常に効果的です。W3C がフィルターの正規化に取り組んでいるようです。今日はIEのフィルター効果を整理し（閲覧にはIEを使用してください）、明日はそれに対応するCSS3の効果を書きます（閲覧にはWebkitカーネルを使用してください）。 、読者が他のより良い記事を持っていて、それらを共有したい場合は、Web フロントエンド コミュニケーション グループ (75701468) に参加して、あなたと私の経験を共有してください。 Alpha: 透明度を設定します。

blur: 高速移動効果、つまりぼかし効果を作成します。

DropShadow:

オブジェクトの固定影を作成します。水平ミラー 画像を作成します。 FlipV : 垂直ミラー イメージを作成します。 gray : 画像をグレースケールします。 マスク: オブジェクト上に透明なマスクを作成します。 不透明度 コントラストによってオブジェクトが照らされているように見えます。 ぼかし

light : 光源を作成します。

wave:

ドロップシャドウ フィルター: 透明効果 構文: 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: 任意の値 FinishX: 任意の値 FinishY: 任意の値 一般的な透明効果: filter:alpha(opacity=30); W3C コード: -webkit -filter:opacity(0.3); または opacity:0.3; rose 線の透明度: filter: alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, Complete unknown) ; バラ ソフトライト効果フィルタ:alpha(opacity=100,finishOpacity=0,style=3); W3Cコード:不明; バラ フィルタ:投影効果 構文: filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive) 説明: Color:#rrggbb 形式、任意。 Offx: X 軸の偏差値。 Offy: Y 軸オフセット値。 ポジティブ: 「True」の場合、非透明ピクセルに可視シャドウを作成します。「False」の場合、透明ピクセル部分に可視シャドウを作成します。 シャドウ効果: filter:progid:dXImageTransform.Microsoft.DropShadow(color=#000000,offX=5,offY=5,positives=true); W3C コード: -webkit-filter:drop-shadow(5px 5px 0 #000000); または box-shadow:5px 5px 0 #000; Rose シャドウ効果: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=10); W3C コード: 不明; ローズ カラーエフェクト: progid:DXImageTransform.Microsoft.Chroma(color=#59A074); W3C コード: 不明; ローズ モザイク ：filter:progi d :dXImageTransform.Microsoft.Pixelate(maxsquare=3); W3C コード: 不明; ローズ グローエフェクト: filter:progid:dXImageTransform.Microsoft.Glow(color=#000000, Strength=5); W3Cコード:不明; ローズ 水平反転:フィルター:fliph; W3Cコード:-webkit-transform:rotateY(180deg); ローズ 垂直反転: フィルター: flickv; W3C コード: -webkit-transform:rotateX(180deg); rose 逆色効果: フィルター: 反転; W3C コード: -webkit-filter :invert(1); ローズ 白黒効果: filter:gray; W3C コード: -webkit-filter:grayscale(1); ローズ X 線写真: filter:xray; W3Cコード: -webkit-filter:grayscale(1) invert(1); rose フィルター: ぼかし効果 構文: filter:Blur(Add = 追加、Direction = 方向、Strength = 強度) 説明: 追加: 画像を印象派のぼかし効果に変更するかどうかを指定します。1 は true、0 は false。 方向：角度、0〜315度、ステップサイズは45度です。 強度: ぼかしの影響を受ける幅のピクセル数。デフォルトは 5 ピクセルです。 風のブラー (角度付き): filter: Blur(add=true,direction=45,strength=30); W3C コード: None Rose 一般的なブラー: filter:progid:DXImageTransform .Microsoft。 Blur(pixelradius=7); W3C コード: -webkit-filter:blur(3px); Rose フィルター: リップル効果 構文: filter: Wave(Add =add, Freq= freq, LightStrength=strength, Phase=phase, Strength=strength) 説明: 追加: 中断するかどうか、デフォルトは「True」です。 Freq: 生成される完全なリップルの数。 LightStrength: 光と影を強化します。0 ～ 100 の整数値。 位相: 正弦波のオフセット。通常、値は 0 で、範囲は 0 ～ 100 の整数値です。 強度: 振幅を表します。 正弦波: フィルター: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3); W3C コード: 不明; Rose グラデーション効果: フィルター: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#000000", EndColorStr="#ffffff"); W3C コード:background:-webkit-linear-gradient(#000000 0, #ffffff 100% ; マウスオーバーボタンの特殊効果を作成するCss3 5. CSS3でRGBカラーを設定する例

以上がCSS3のフィルター効果例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。