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

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

Jun 24, 2016 pm 12:01 PM
css filter 勉強 フィルター ノート

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"
例: フィルター:

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップの日付を表示する方法 ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答:ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順:ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップの日付を確認する方法 ブートストラップの日付を確認する方法 Apr 07, 2025 pm 03:06 PM

ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール(日付形式、エラーメッセージなどなど)を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。

ブートストラップナビゲーションバーの設定方法 ブートストラップナビゲーションバーの設定方法 Apr 07, 2025 pm 01:51 PM

ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加(オプション)調整スタイル(オプション)

See all articles