ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS_html/css_WEB-ITnose で学習ノートをフィルタリングする

CSS_html/css_WEB-ITnose で学習ノートをフィルタリングする

WBOY
リリース: 2016-06-24 12:01:20
オリジナル
1237 人が閲覧しました

1. CSS 静的フィルター スタイル (フィルター) (IE4.0 以降でのみサポート)
CSS 静的フィルター スタイルの使用方法: { filter : filtername(parameters1,parameters2, ...) }

フィルター スタイルの簡単な説明 サポートされているパラメーター
アルファ画像またはテキストの不透明度、finishOpacity、style、startX、startY、finishX、finishY、add、方向、強さを設定します
blur 指定した方向と位置に動的なぼかし効果を生成します 選択した Make の add、方向、強さ
chroma透明な色
dropShadow 指定した方向と位置に影の色、offX、offY、ポジティブを生成します
flipH オブジェクトを水平方向に反転します
flipV オブジェクトを垂直方向に反転します
glow オブジェクトの周りのグローの色、強さ
grayオブジェクトはグレースケールで処理されます
invert はオブジェクトの色を反転します
light はオブジェクトの照明をシミュレートします
mask はオブジェクトにマスクの色を生成します
shadow はオブジェクトの色のエッジに沿って影を生成し、方向
wave は正弦波を生成します垂直方向に、freq、lightStrength、phase、strengthを追加します
xrayはオブジェクトの色深度を変更し、白黒画像を描画します

上記は静的フィルターの内容全体ですCSSは大文字と小文字が区別されることに注意してください。 !
2. CSSダイナミックフィルター
ダイナミックフィルターは、ページに動きのあるフェードイン・フェードアウトや画像の変形効果を加えることができ、ブレンド(混合)とリビール(表示)の2種類に分けられます。後者は 24 種類の画像変換効果を提供します。動的フィルタの呼び出しでは、静的フィルタで定義する必要があるフィルタ タイプ、パラメータなどに加えて、そのステータスを制御するためにスクリプト言語も使用されます。
まず、ダイナミックエフェクトを開始する前に、ダイナミックエフェクトを適用(Apply)してから、ダイナミックエフェクトを再生(Play)する必要があります。また、ダイナミックエフェクトの実行中にダイナミックエフェクトを中断(Stop)することもできます。以下のメソッドで実現します:
オブジェクト名.filters(フィルタ値).Apply()
オブジェクト名.filters(フィルタ値).Play()
オブジェクト名.filters(フィルタ値).Stop()
のステータスフィルターは「オブジェクト名.フィルター(フィルター値).ステータス」で判定できます。値が0の場合はフィルターが未実行を意味します。1の場合はフィルターが完了したことを意味します2の場合はフィルタが実行されていることを意味します。
フィルターを定義するときは、前述のように、ブレンド (「filter:blendTrans(duration=time value)」、duration はフィルターの実行に必要な時間を秒単位で表します) と表示 (「filter:revealTrans(duration=time value)」を行うことができます。 value,transition=遷移タイプ)"、遷移タイプは0から23までの値です)。

フィルターはまだ W3C によって正式に認められていません。フィルタは Microsoft の IE ブラウザの一部にすぎず、Netscape ブラウザでは使用できません。関連規格を策定する団体で検討が進められているが、まだ最終結論には至っていない。私の意見では、フィルターは素晴らしいビジュアルを作成する上で非常に楽しく、不可欠な部分です。フィルターを使用すると帯域幅が節約され、同じ効果を得るために最初に巨大なテキスト ビットマップを作成することなく、素晴らしい
ビジュアル デザインを作成するときにテキストの書式設定を使用できるようになります。
しかし、これらの機能はまだ HTML の正式な部分になっていないため、すべてのブラウザーでこれらの機能が表示されるわけではありません。場合によっては、従来の方法で同じ効果を作成することを検討する必要があり、もちろん、巨大な GIF ファイルを Web ページに詰め込み続ける必要があります。
Silence...Silence...


CSSフィルターfilterの詳しい説明
構文:STYLE="filter:filtername(fparameter1, fparameter2...)"
(Filternameはフィルターの名前、fparameter1、fparameter2、などはフィルターです(ミラーパラメーター)

フィルターの説明:
alpha: 透明度レベルを設定します
blur: 高速移動効果、つまりぼかし効果を作成します
chroma: 特殊な色を透明にします
DropShadow: 固定値を作成しますオブジェクトの影
FlipH: 水平の鏡像を作成します
FlipV: 垂直の鏡像を作成します
glow: 近くのオブジェクトの外側に光を追加します
gray: 画像をグレースケールします
invert: 色を反転します
light: オブジェクトに光源を作成しますオブジェクト
mask: オブジェクト上に透明なマスクを作成します
shadow: オフセット固定シャドウを作成します
wave: リップル効果
Xray: オブジェクトを X 線で照らされているように見せます

1. フィルター: アルファ
構文: STYLE="filter:Alpha(Opacity=不透明度, FinishOpacity=finishopacity , Style = スタイル, StartX = 開始
FinishOpacity: 目標値。
スタイル: 1、2、または 3
StartX: 任意の値
StartY: 任意の値
例: filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2. フィルター: ぼかし
構文: STYLE="filter:Blur(Add = 追加、Direction = 方向、Strength =強度)"
説明:
加算: 通常は 1、または 0。
方向:角度、0〜315度、ステップサイズは45度です。
強度: 効果の成長の値。通常は 5 で十分です。
例: filter:Blur(Add="1",Direction="45",Strength="5")
3. フィルター: Chroma
構文: STYLE="filter:Chroma(Color = color)"
手順: color : #rrggbb 形式、任意。
例: filter:Chroma(Color="#FFFFFF")
4. フィルター: DropShadow
構文: STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
手順:カラー:#rrggbb 形式、任意。
Offx: X 軸の偏差値。
Offy: Y 軸オフセット値。
正: 1 または 0。
例: filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5. フィルター: FlipH
構文: STYLE="filter:FlipH"
例: filter:FlipH
6. フィルター: FlipV
構文: STYLE="filter:FlipV"
例: filter:FlipV
7. フィルター: グロー
構文: STYLE="filter:Glow(Color=color, Strength =strength)
説明書:
色: 明るい色。
強度: 強度 (0-100)
例: filter:Glow(Color="#6699CC",Strength="5")
8. フィルター: グレー
構文: STYLE="filter:Gray"
例: filter :グレー
9. フィルター: 反転
構文: STYLE="filter:Invert"
例: filter:Invert
10. フィルター: マスク
構文: STYLE="filter:Mask(Color=color)"
例: filter:Mask (Color="#FFFFE0")
11. フィルター: シャドウ
構文: filter:Shadow(Color=color, Direction=direction)
説明:
カラー: #rrggbb 形式。
方向:角度、0〜315度、ステップサイズは45度です。
例: filter:Shadow (Color="#6699CC", Direction="135")
12. フィルター: wave
構文: filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength) =強度)
説明:
加算: 通常は 1 または 0。
Freq: 変形値。
LightStrength: 変形の割合。
フェーズ: 角度変形の割合。
強度:変形強度。
例: フィルター: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13. フィルター: Xray
構文: STYLE="フィルター:Xray"
例: フィルター:

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート