CSSフィルターの創造力の探求とブレンド

CSSフィルターとブレンディングモード：Web視覚効果を改善するための強力なツール

コアポイント

• CSSフィルターは、グレースケール、ぼかし、コントラスト、明るさ、タンなど、さまざまな視覚効果を提供します。これにより、Webページコンテンツの視覚的な魅力を高め、組み合わせて複雑な効果を実現できます。
• CSSブレンドモードにより、要素間の視覚的な相互作用が驚くべき効果を生み出すことができます。一般的に使用されるブレンドモードには、ポジティブなスタッキング、色フィルタリング、オーバーレイ、差、除外などが含まれます。これらは、重複する要素の色値をさまざまな方法で処理します。
• フィルターとブレンドモードを使用する場合、アクセシビリティとブラウザの互換性を考慮する必要があります。十分な色のコントラスト、テキストの明瞭さ、画像の代替テキスト、レスポンシブデザインが、幅広いユーザーグループでコンテンツを利用できるようにし、理解しやすいことを確認するための鍵です。
CSSフィルターとブレンドモードを使用する際の一般的な間違いには、フィルターの過剰使用、ユーザーの相互作用を考慮せずにインタラクティブな要素にフィルターを適用し、複雑なフィルターまたは組み合わせのパフォーマンスへの影響を無視することが含まれます。使用のバランスをとり、明確さを優先順位付けすることで、これらの落とし穴を回避できます。
CSSフィルターとブレンドモードは、無限の創造的な可能性を提供し、Web開発者が魅力的で動的なユーザーインターフェイスを作成できるようにします。さまざまな組み合わせを試すと、ユニークな効果が生じ、Webサイトに視覚的な洗練度が追加されます。
この記事では、Webページの美しさを高めることができるさまざまな創造的な可能性を提供するCSSフィルターとブレンドモードについて説明します。

CSSフィルターから学習

CSSフィルターは、Web要素に視覚効果を適用する方法を提供します。これらの効果は、単純な調整（画像の明るさやコントラストの変化など）から、より複雑な変換（ぼやけや日焼けのトーンの追加など）にまで及びます。

一般的に使用されるCSSフィルターに飛び込み、Webコンテンツの視覚的魅力をどのように強化するかを調べましょう。

1

フィルターは色をグレースケールの影に変換し、画像に単色でクラシックな外観を与えます。パーセンテージを指定することにより、効果の強度を制御できます。

grayscale()

コンテナに

<div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending " />
</div>

を追加することにより、ブラウザに、画像を含むこのコンテナ内のすべてにグレースケール効果を適用するように指示します。その結果、コンテナに表示される画像は、元の色の代わりにグレースケールの影に表示されます。

.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}

プロパティを

に設定することにより、画像を完全な強度でグレースケールに変換することを示します。 <div> filter: grayscale()filterCODEPEN例grayscale(100%)

2 フィルターは、ソフトで焦点が合っていない効果を作成します。これは、弱くしたい背景画像や要素に特に役立ちます：

<div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending " />
</div>

ここでは、画像を含むこのコンテナ内のすべてにぼやけたフィルターを適用するようブラウザに指示します。その結果、容器に表示される画像は、まるでわずかにぼやけているかのように、柔らかい焦点が合っていない効果があります。 blur(5px)を設定することにより、5ピクセルのぼかし半径で画像にぼやけ効果を適用することを示します。

CODEPEN例

3

フィルターは、要素の明るい領域と暗い領域の違いを強化または軽減し、視覚的に目を引くものにします。 contrast()

ここでは、容器内の画像の明るい領域と暗い領域のコントラストが増加し、視覚的に目を引くものになります。それを

.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}

に設定することにより、画像のコントラストを150％増やしたいと言います。

contrast(150%)

CODEPEN例

4

フィルターは、要素の全体的な明るさを制御します。明るさの増加は色をより鮮やかにすることができますが、明るさを減らすことで柔らかい効果や暗い効果が生じる可能性があります。

ここで、コンテナ内の画像の全体的な明るさが調整されます。それをbrightness()に設定することにより、画像の輝度を20％増加させたいと言います。

.image-container {
  filter: blur(5px);
}

CODEPEN例brightness(120%)

5 フィルターは、要素に温かい日焼けのトーンを与え、ノスタルジックまたはレトロな感触を作り出します：

ここで、画像には、古い写真を思い起こさせる温かい日焼けのトーンが表示されます。それを

に設定して、80％の強度で画像に黄褐色の効果を適用することを意味します。パーセンテージ値を調整すると、画像に適用される日焼け効果の強度を制御できます。 sepia()

.image-container {
  filter: contrast(150%);
}

CODEPEN例

sepia(80%)

CSSフィルターの組み合わせ

CSSフィルターの利点の1つは、それらの組み合わせです。複数のフィルターを適用して、複雑な視覚効果を実現できます。

ここでは、コンテナ内の要素に複数のフィルターを適用して、複合視覚効果を実現します。複数のフィルターは、

属性値のスペースで区切られています。各フィルターは、指定された順序で左から右に適用されます：

.image-container {
  filter: brightness(120%);
}

フィルターは、要素の色を30％の強度でグレースケールの影に変換します。

filter

フィルターは、3ピクセルのぼやけたラジアル要素を備えたぼやけ効果を追加します。

1. grayscale(30%)フィルターは、要素のコントラストを150％増加させます。
2. これらのフィルターを組み合わせることにより、Webコンテンツの外観を高める複雑な視覚効果を実現できます。各フィルターのパラメーターを調整すると、設計の好みに合わせて体効果をマイクロ調整することができます。 blur(3px) この例では、この例では、この要素は微妙なグレースケール効果、わずかなぼかし、より高いコントラストを持ち、その結果、ユニークで芸術的な外観になります。
3. contrast(150%)CODEPEN例

その他のフィルター

drop-shadow()、hue-rotate()、invert()、opacity()、saturate()、backdrop-filterなど、より多くのCSSフィルターを試すことができます。また、半透明の背景を背景の背後にある背景をブレンドする

プロパティもあります。

MDNでこれらの機能について詳しく知ることができます。 （MDNリンクはここに挿入する必要があります）

CSSハイブリッドモードのパワーを使用します

CSSブレンドモードにより、要素は視覚的に相互作用し、Z軸の従来のスタッキングを超えて効果を生み出します。ブレンドモードは、重複する要素の色の値を処理し、驚くべき結果を生み出します。一般的に使用されるいくつかのハイブリッドモードを探索し、それらを実装する方法を学びましょう。

1

multiplyブレンディングモードは、重複する要素の色値を「掛ける」ことでそれらを組み合わせます。上部レイヤーの各ピクセルのRGB（赤、緑、青）値を下層に対応するピクセルを掛けることにより、暗いブレンドを作成します。これにより、共有領域が暗くなり、各レイヤーのユニークな色がまだ表示されているブレンドが生成されます。

<div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending " />
</div>

CODEPEN例

2 CSSのブレンドモードは、要素の色がその基礎となる要素の色とどのように混合されるかを決定します。特に最上層の色を明るくし、明るいブレンドを生成します。

以下は、どのように混合モードが機能するかです：

screen

色計算：

screen上部の各ピクセルでは、RGB（赤、緑、青）値が反転します。

次に、逆色の値を下位層の対応するRGB値に掛けます。
1. 結果：
   結果は、レイヤーの共通領域がより明るくなり、明るい効果をもたらすブレンドです。
上部層が飽和するほど、効果が強くなります。
2. CODEPEN例

.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}

3

CSSのブレンドモードは、とブレンドモードを組み合わせて、リッチで対照的なビジュアルを生成します。ミックスモードの動作方法は次のとおりです

色計算：

基礎となる（b）の色が0.5よりも明るい場合、結果は式2overlaybmultiplytを使用して計算されます。ここで、bは基礎となる色、tは上部色です。 screen overlay基礎となる色が0.5以下に等しいか暗い場合、結果は式1-2

（1 -b）

（1 -t）を使用して計算されます。
1. • 結果：
   • ブレンドモードは、暗い色に対するモードの暗い効果と、明るい色に対するモードの明るい効果を組み合わせます。
   結果は、コントラストと飽和を高めるブレンドです。暗い領域が暗くなり、明るい領域が明るくなり、視覚的に印象的な効果が生じます。
2. • overlay multiplyscreenCODEPEN例

   • 4の差

     ブレンドモードは、各ピクセルの上部と下の色の値の絶対差を計算します。重複する要素間の色の違いを強調することにより、高いコントラスト効果を生み出します。ミックスモードの動作方法は次のとおりです difference difference色計算：

     上部の各ピクセルについて、
     上部層と下層RGB（赤、緑、青）値の絶対差を計算します。
     1. 結果は、2つのレイヤー間の色の違いを示しています。
        結果：
        似た色または同一の色の
     領域は、暗い色調を生成します。
     2. 色が異なる領域は、より明るい色調を生成します。
        色が同じ場合、結果は黒になります（RGB値は0）。
     CODEPEN例

     <div class="image-container">
       <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending " />
     </div>

     5

     ブレンドモードは、

     ブレンドモードと同様の効果を生成しますが、より柔らかくてコントラストの少ない結果を生成する傾向があります。多くの場合、重なり合った色の色の色と異なる色の両方が最終的な外観に寄与できるようにするために使用されます。ミックスモードの動作方法は次のとおりです

     色計算：exclusion 上部の各ピクセルにdifference式B t -2 exclusion b

     tを適用します。ここで、bは下層の色値、tは上層の色値です。
     1. 結果は、2つのレイヤーの色値間の違いの組み合わせを示しています。
        • 結果：
        似た色または同一の色の領域は、外観が暗くなります。
        ブレンドモードで見られる強力なコントラストではなく、異なる色の領域がブレンドと柔らかな効果を生成します。
     この効果はしばしばより微妙であり、調和のとれた色のブレンドを作成するためによく使用されます。
     2. • difference
        CODEPEN例
        その他のブレンディングモード

     .image-container {
       width: 300px;
       filter: grayscale(100%);
     }
     
     .image-container img {
       width: 100%;
     }

     、

     、、、

     、

     、

     、

     、darken、lightenなど、他にも多くのハイブリッドモードがあります。 、color-dodge、color-burn、hard-light、soft-light、hue、saturation、color、luminosity、plus-darker。 plus-lighter

     MDNでどのように機能するかについて詳しく知ることができます。 （MDNリンクはここに挿入する必要があります）
     いくつかの予防策
     CSSフィルターとブレンディングモードが困難を引き起こす可能性があることを発見するエンドユーザーが常にいます。いくつかの例を見てみましょう。
     ブラウザサポート
     CSSフィルターとブレンドモードのサポートは非​​常に広範囲ですが、エンドユーザーが満足のいく結果を得ることを絶対に保証するために、フォールバック計画を検討することをお勧めします。たとえば、

     .image-container {
       filter: blur(5px);
     }

     アクセシビリティ
     設計または開発にフィルターとミックスを使用する場合、障害のあるユーザーグループを含む幅広いユーザーグループがコンテンツが利用可能であることを確認するために、アクセシビリティを考慮することが重要です。注意すべき重要なことは次のとおりです
     1. 色のコントラスト。特にフィルターまたはブレンドモードを適用する場合は、テキストと背景色の間に十分なコントラストがあることを確認してください。コントラストが低いと、視覚障害のあるユーザーがテキストを読むことを困難にする可能性があります。さまざまな種類の色覚異常をシミュレートするツールでデザインをテストし、色視力の欠陥のユーザーが読み取ることができるようにします。
     2. テキストの明確さ。テキストの明確さを減らす可能性のあるフィルターやブレンドモードは避けてください。たとえば、一部のブレンドモードでは、テキストがぼやけたり不明確に見える場合があるため、視覚障害のあるユーザーが読み取ることが困難になります。
     3. 代替テキスト。フィルターまたはブレンドモードの影響を受ける可能性のある画像とグラフィックの代替テキストを提供します。スクリーンリーダーは、視覚障害のあるユーザーへのコンテンツを説明するために、代替テキストに依存しています。
     4. アニメーションとトランジション。アニメーション要素にフィルターまたはブレンドモードを適用する場合、特定の認知障害または神経障害を持つユーザーにとって問題がある可能性があるため、アニメーションがあまり気を散らしたり高速ではないことを確認してください。
     5. レスポンシブデザイン。デザインが応答性が高く、さまざまなデバイスと画面サイズでうまく機能していることを確認してください。より大きな画面上の効果的なフィルターまたはブレンドモードは、小さな画面ではうまく機能しないか、問題を引き起こす可能性があります。
     6. キーボードナビゲーション。すべてのインタラクティブな要素がアクセス可能であり、キーボードナビゲーションを介して使用されていることを確認してください。キーボード入力または支援技術に依存しているユーザーは、コンテンツをシームレスにナビゲートして対話できるはずです。
     7. 支援技術を使用したテスト。スクリーンリーダーや音声認識ソフトウェアなどのさまざまな支援技術を使用してデザインをテストして、フィルターやハイブリッドモードのために発生する可能性のある問題を特定して解決します。
     8. 大まかに強化されています。漸進的な強化の原理に従う設計アプローチを実装します。フィルターまたはブレンドモードがサポートまたは無効になっていない場合でも、コアコンテンツと機能が引き続き利用できることを確認してください。
     これらのメモを念頭に置いておくことで、視覚的に魅力的なだけでなく、障害のある人を含むより多くの視聴者がアクセスできるデザインを作成できます。

     CSSフィルターとブレンドモードを使用する場合の一般的なトラップ

     以下は、開発者が遭遇する可能性のある一般的な間違いとそれらを回避する方法です。

     エラー1：フィルターの過剰使用

     一般的な間違いは、あまりにも多くのフィルターを適用し、視覚的に圧倒的または混乱するレイアウトをもたらすことです。ユーザーが重要なコンテンツに集中することを困難にすることができ、ユーザーエクスペリエンスが悪い可能性があります。

     例：

     この例では、複数のフィルターが同じ要素に適用されます。フィルターを組み合わせるとユニークな効果が生じることがありますが、バランスをとって、全体的な設計が一貫性があり、使いやすいままであることを保証することが重要です。視覚的な階層を検討し、明確さを優先します。

     <div class="image-container">
       <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending " />
     </div>

     エラー2：インタラクティブ要素でフィルターを使用
     ユーザーの相互作用を考慮せずにボタンやリンクなどのインタラクティブな要素にフィルターを適用すると、ユーザーエクスペリエンスが低くなり、混乱しているユーザーエクスペリエンスが発生する可能性があります。
     例：

     フィルターは、インタラクティブな要素の外観を変更する可能性があり、ユーザーの目的に対する理解に影響を与える可能性があります。フィルターがインタラクティブな要素の明快さと使いやすさに影響を与えないことを確認してください。

     エラー3：パフォーマンスの影響を無視してください

     複雑なフィルターまたはフィルターの組み合わせを適用すると、特に古いデバイスやブラウザーにパフォーマンスに影響を与える可能性があります。パフォーマンスの問題を無視すると、ページの読み込み時間が遅くなります。

     例：

     <div class="image-container">
       <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending " />
     </div>

     複雑なフィルターには、より多くのコンピューティングリソースが必要になる場合があり、Webページのパフォーマンスに影響します。さまざまなデバイスでパフォーマンスをテストし、視覚効果とページ速度の間のトレードオフを考慮して、必要に応じて最適化します。

     結論

     CSSフィルターとブレンドモードにより、Web開発者は創造的な境界を押して魅力的で動的なユーザーインターフェイスを作成できます。

     これらの機能を理解して組み合わせることで、Webコンテンツの視覚的な魅力を強化し、ユーザーにとってより魅力的で思い出に残るものにすることができます。
     CSSフィルターとミックスの創造性を探るときは、さまざまな組み合わせを試して、達成できるユニークな効果を発見することをためらわないでください。
     ポートフォリオ、ブログ、eコマースのWebサイトを構築している場合でも、これらのテクノロジーを組み合わせることで、視覚的な洗練感を追加してウェブサイトを際立たせることができます。

     以上がCSSフィルターの創造力の探求とブレンドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。