戦闘へのWebフロントエンドの取得:CSSミックスブレンドモードハイブリッドモードフィルタ画面

まず、混色スクリーンモード事実

screenモード、「色」として知られている国を混ぜ、式は次のとおりです。戦闘へのWebフロントエンドの取得:CSSミックスブレンドモードハイブリッドモードフィルタ画面

Cは、混合RGBカラー値(0〜255)の最終的な式を表し、A及びBは、2つの色を混合するためのRGBカラー値(範囲は0〜255である)を表します。

式の内容から分かるように、カラーモードの混合色は、画素値は、2つの色の補色が乗算値であり、次いで、255で割ること補色です。

例えば、赤、RGB値である(255,0,0)青色があり、RGB値であり(0,0,255)、これら2色の混色を用いて色モード後の色値です。

  • R = 255 - (255 - 255)*(255 - 0)/ 255 = 255
  • G = 255 - (255 - 0)*(255 - 0)/ 255 = 0
  • B = 255 - (255 - 0)*(255 - 255)/ 255 = 255

したがって、最終的なカラー値は、RGB(255,0,255)、すなわち、以下のカラーパッチは、次のとおり

以下が適用されるmix-blend-mode:screen混合色のコード値のリアルタイム効果で:

また、カラーモードの最初の理解を持っていた、2つの演色色はまったく同じで、両方の検証式を見ることができます。

Webアプリケーションでのカラーパターンの第二に、特性

以下の視覚特性のいくつかは以下のとおりです。

  1. まだ元の色を示す任意の色とブラック色の実装。
  2. 任意の色と白の色は白と実行しました。
  3. 任意の色と他の色は、より浅い漂白効果に幾分類似するカラーモードハイブリッド後の色を実行します。

画像にネオングロー効果を作成するためのカラーモードモードでは、この機能も有用であるWeb開発者のために非常に有用です。

私たちはしばしば、このようなすべての天候の種類、またはネオングローエフェクトなどの一部の画像素材のシーンにいくつかの特殊効果を追加する必要があります。

伝統的な練習は透明PNGイメージが重なる使用することですが、PNG透明フォアグラウンドを使用すると、次の2つの欠点があります。

  1. その結果は、ベース・マップと完全に統合されたの不足感自然ではありません。
  2. 画像サイズは、Kの数百に迅速に、大きすぎます。

今、カラーモードモードであれば、我々は準備として、JPG画像がその上に黒い背景をSE、混合モードアプリケーション画面のみ完全にベースマップに統合され、前景画像ファイルサイズのみPNGを使用することはできません1/10写真。

例えば、我々は以下のベースマップ、森や鹿を持っています:

森と鹿

次に、以下のフォアグラウンドいくつかの特殊効果があります。

明るい輝き

水蒸気の霧

大雨へ

水蒸気の霧

以下に示すように、それぞれ、およびベースマップ設けられ、効果をリアルタイムで見ることができる混合しました。

戦闘へのWebフロントエンドの取得:CSSミックスブレンドモードハイブリッドモードフィルタ画面

戦闘へのWebフロントエンドの取得:CSSミックスブレンドモードハイブリッドモードフィルタ画面

戦闘へのWebフロントエンドの取得:CSSミックスブレンドモードハイブリッドモードフィルタ画面

戦闘へのWebフロントエンドの取得:CSSミックスブレンドモードハイブリッドモードフィルタ画面

私たちは、大きな効果が自然で見ることができます。唯一の20Kのサイズに関するフォアグラウンドクリップのサイズ、ここで使用さ300 * 400は、オーバーヘッドが非常に小さいです。

ビデオは、HTMLビデオにも適用することができます

モードは画像のみに基づいて行動することができ、混合色は、また、限り、我々は背景黒のビデオを作ると、同じ、ビデオのために使用することができ、およびWebページを背景に良いブレンドを得ることができるようになります。

例えば、こちらのページのスクリーンショットは、スタイルのシーングラフの第二の要素があります:

ホームページスクリーンショット

図景観材料

その後、彼らは花火や雨の(映像が動かない、クリックしてください)あり、2つの黒い背景のビデオエフェクト素材があります。

以下に示すように、合成映像素子モード画面を提供することにより、優れた効果(固定映像クリック)を得ることができます。

追加された新しいアイデアのダイナミックな効果のWebページ。

この技術を終了するWebフロントに興味を持って小さなパートナーは、注意が必要な実践的な内容を開発するためにあなたといくつかを共有することを学ぶ、私たちの研究サークル、作品の第六年に追加することができます。767-273-102秋のドレス。ゼロベースのフロントエンドから起動する方法を学習します。夢を持つ人々のグループは、我々は別の都市にあってもよいが、我々は一緒に歩いていく先端の先端

第三に、混合モードの色との互換性

互換モードは、まだ2014年の終わりの非常に混色スライドで現在はほぼ5年間、サポートするために始めた、携帯電話の更新速度に応じて、限り、あなたの製品が国家レベルではないとして、携帯端末は、使用しても安全です。

エッジは、Chromeブラウザを採用するので、それゆえ、またサポートEdge75は、PC側がアップ輝くことができたときに、10年後、誰もがこのようなwindow7のようなシステムを使用していないことを予測することができます。

混合モードの互換性のスクリーンショット

あなたはグラフィックス性能の分野での違いを確認するためにコミットしている場合は、すべての言語では、どんなデザインツール、色混合モデルは、混合モードの非常に基本的な、非常に一般的な形ではない、ハイブリッドアルゴリズムは、このモデルを取る必要があります、特殊効果やシナリオが心で覚えています。

さて、この記事では、すべての読書のためのおかげです!

おすすめ

転載: blog.51cto.com/14568129/2442603
おすすめ