CSS3のフィルタ（静的フィルタと動的フィルタ）の勉強メモ

このセクションでは、静的フィルターと動的フィルターの使用方法を含め、css のフィルターについて紹介します。理解できない場合は、以下を参照してください。

1. css 静的フィルター スタイル (フィルター) (ie4.0 以降でのみサポート)

css 静的 方法フィルター スタイルを使用します: { filter : filtername(parameters1,parameters2, ...) }

フィルター スタイルの簡単な説明はパラメーターをサポートします

アルファ: 不透明度を設定します、finishopacity、style、startx、starty、finishx、finishy、add、方向、画像またはテキストの強さ

blur: 指定した方向と位置に動的なぼかし効果を生成します add、direction 、強さ

chroma: 選択した色の色を透明にします。

dropshadow: 指定した方向と位置に影の色を生成します。、offx、offy、positive

fliph: オブジェクトを水平方向に反転します。

flipv: オブジェクトを垂直方向に反転します。

グロー: オブジェクトの周囲の光る色と強さ

グレー: オブジェクトをグレースケールで処理します

反転: オブジェクトの色を反転します

/>

ライト: オブジェクト上のライティングをシミュレートします。

マスク: オブジェクト上にマスク カラーを生成します。

shadow: オブジェクトに沿って edge が影の色、方向を生成します

wave: 正弦波形を生成します add、freq、lightstrength、位相、垂直方向の強度
p>

xray: オブジェクトの色を変更します depth、白黒画像を描画します

上記は静的フィルターの内容全体です。css では大文字と小文字が区別されることに注意してください。

2. css 動的フィルター

動的フィルターはページに使用できます。動きのあるフェードイン・フェードアウトや画像変形効果を追加しますブレンド(混合)とリビール(表示)の2種類に分けられ、前者はオブジェクトを徐々に消したり出現させたりすることができ、後者は24種類の画像を提供します変身効果。動的フィルタの呼び出しでは、静的フィルタで定義する必要があるフィルタ タイプ、パラメータなどに加えて、そのステータスを制御するためにスクリプト言語も使用されます。

まず、ダイナミックエフェクトを開始する前に、ダイナミックエフェクトを適用（apply）してからダイナミックエフェクトを再生（play）する必要がありますが、ダイナミックエフェクトの実行中にダイナミックエフェクトを中断（stop）することもできます。次のメソッド実装を使用できます:

オブジェクト名.filters (フィルター値).apply()
オブジェクト名.filters (フィルター値).play()
オブジェクトname.filters(フィルタ値).stop()

フィルタの状態は「オブジェクト名.filters(フィルタ値).status」で判断でき、値が0の場合フィルタが有効であることを示します。 1 の場合はフィルタが完了していることを示し、2 の場合はフィルタが実行中であることを示します。

フィルターを定義するときは、前述のように、ブレンド ("filter:blendtrans(duration=time value)"、duration はフィルターの実行に必要な時間を秒単位で表します) と表示 ("filter:revealtrans(duration)" を行うことができます。 =時間値、transition=遷移タイプ)"、遷移タイプは0から23までの値です)。

フィルタはまだ w3c によって正式に認識されていません。フィルタは microsoft の ie ブラウザの一部にすぎず、netscape ブラウザでは使用できません。関連規格を策定する団体で検討が進められているが、まだ最終結論には至っていない。私の意見では、フィルターは素晴らしいビジュアルを作成する上で非常に楽しく、不可欠な部分です。フィルタを使用すると帯域幅が節約され、同じ効果を得るために最初に巨大なテキスト ビットマップを作成しなくても、素晴らしいビジュアル デザインを作成するときにテキストの書式設定を使用できるようになります。

しかし、これらの機能はまだ html の正式な部分になっていないため、すべてのブラウザでこれらの機能を表示できるわけではありません。場合によっては、従来の方法で同じ効果を作成することを検討する必要があり、もちろん、巨大な gif ファイルを web ページに詰め込み続ける必要があります。
沈黙...沈黙...

3. css フィルタ filter の詳細説明

構文:

STYLE="filter:filtername(fparameter1, fparameter2...)"

(filtername はフィルターの名前、fparameter1、fparameter2 などはフィルターのパラメーターです)

フィルターの説明:

alpha: 透明度レベルを設定します
blur: 高速移動効果、つまりぼかし効果を作成します
chroma:特殊な色を透明にする
dropshadow: オブジェクトの固定影を作成します
fliph: 水平方向の鏡像を作成します
flipv: 垂直方向の鏡像を作成します
glow: オブジェクトに光を追加します近くのオブジェクトの外側
グレー: 画像をグレースケールします
反転: 色を反転します
ライト: オブジェクト上に光源を作成します
マスク: オブジェクト上に透明なマスクを作成します
>shadow: オフセット固定シャドウを作成します
wave: リップル効果
xray: オブジェクトを x 線で照らされているように見せます

1. フィルター: アルファ

構文:

style="filter:alpha(opacity=不透明度、finishopacity=finishopacity、style=style、startx=startx、starty=starty、finishx=finishx 、finishy=finishy)"

説明:
不透明度: 0 ～ 100 の範囲の開始値。0 は透明、100 は元の画像です。
仕上げ不透明度: 目標値。
スタイル: 1、2、または 3
開始 x: 任意の値
開始 y: 任意の値

例: filter:alpha(opacity="0",finishopacity="75 ",style="2")

2. フィルター: ぼかし

構文:

style= " filter:blur(add = 追加、direction = 方向、strength = 強度)"

説明:
add: 通常は 1 または 0。
方向: 角度、0 ～ 315 度、ステップ サイズは 45 度です。
強度: 効果の成長の値、通常は5。

例: filter:blur(add="1",direction="45",strength="5")

3. フィルター: クロマ

構文:

style="filter:chroma(color = color)"

説明: color: #rrggbb 形式、任意。

例: filter:chroma(color="#ffffff")

4. フィルター: dropshadow

構文:

p>

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) " p>

説明:
色: 発光色。
強度: 強度 (0-100)

例: filter:glow(color="#6699cc",strength="5")

8.フィルター: グレー

構文: style="filter:gray"

例: filter:gray

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 度です。

例: フィルター:シャドウ (color="#6699cc", direction="135")

12. フィルター: ウェーブ

構文: filter: wave(add=add, freq=freq, lightstrength=strength, phase=phase, strength=strength)

説明:
add: 通常は 1 または 0 。
freq: 変形値。
lightstrength: 変形率。
位相: 角度変形の割合。
強度：変形強度。

例: フィルター: wave(add="0", phase="4", freq="5", lightstrength="5", strength="2")

13. フィルター: xray

構文: style="filter:xray"

例: filter:xray