ブログ

May 11, 2023

CSS フィルターとブレンド モードを使用して視覚効果を作成する方法

I filtri CSS e le modalità di fusione sono strumenti potenti che ti consentono di applicare facilmente design straordinari.

CSS フィルターとブレンド モードは、複雑なコードを必要とせずに、Web ページに見事な視覚効果を簡単に適用できる強力なツールです。

CSS フィルターとブレンド モードを使用すると、Web ページに視覚効果を簡単に適用できます。 フィルターは、画像やその他の HTML 要素のレンダリングを調整するために使用される、事前定義された CSS 関数のセットです。 一方、ブレンド モードは、要素がその背景または隣接する要素とどのようにブレンドされるかを決定します。

CSS フィルターを適用するには、フィルタープロパティと、適用されるエフェクトのタイプを指定するプロパティ。 各フィルター プロパティは CSS 関数であり、CSS 変数関数と同様に機能します。 フィルターがスタイル付き要素にどの程度影響を与えるかを指定するパラメーターを受け取ります。

HTML 要素のスタイルを設定するために使用できる CSS フィルター関数が 10 個あります。

これらのフィルターを個別にまたは組み合わせて使用​​して、独自のスタイルを作成し、HTML 要素の外観を向上させることができます。

これらのフィルターの中には、適切な方法で使用すると、他のフィルターと併用するとより効果的に機能するものもあります。

ここでは、CSS フィルターを組み合わせて画像要素にさまざまな視覚効果を実現する例を示します。

のグレースケール()フィルターは、画像またはテキスト要素からすべての色情報を削除します。 フィルターは 0 ～ 1 の値を取り、0 は元の色を意味し、1 は完全なグレースケール効果を意味します。

のセピア（）フィルタは、画像またはテキスト要素にセピアトーン効果を適用します。 フィルターは 0 から 1 までの値も取ります。

例えば：

組み合わせるグレースケール()14%で、そしてセピア（）30% に設定すると、画像にヴィンテージまたはレトロな効果を与えることができます。

の飽和()フィルターは、画像またはテキスト要素の彩度を増減します。 フィルターは 0 から無限大までの値を取り、1 が元の色で、値が大きいほど彩度が高くなります。

の反転（）フィルタは、カラー ホイール上に存在するすべての色の色相を 180 度反転することにより、画像またはテキスト要素の色を反転します。 これは、フィルターが色相を維持しながら要素の明るさと彩度のレベルを変更することを意味します。

例えば：

このコードは画像の色を反転し、彩度を 75% 増加させます。

の色相回転()フィルターは画像またはテキスト要素の色相を回転します。つまり、明るさと彩度のレベルを維持しながら要素全体の色を変更します。 回転量は度単位で指定できます。0 は元の色を表し、360 は完全に回転して元の色に戻ることを表します。

を組み合わせると、色相回転()そして対比（）フィルターを使用すると、画像に鮮やかでカラフルな効果を加えることができます。

例えば：

Hue-rotate は次の値を受け入れることができます。度、卒業生、ラッド、 または振り向く 。 上記のコードは、画像の色相を 10 度回転し、コントラストを上げます。

明るさとぼかしのフィルターについては、一目瞭然です。 前者は画像の明るさを調整し、後者は適用されるぼかしのレベルを制御します。

を組み合わせると、輝度（）そしてぼかし()フィルターを使用すると、画像に夢のような柔らかな効果を加えることができます。

例えば：

上記のコードは明るさを次のように下げます。0.8 (80%)そして、5ピクセル画像にぼかし効果を与えます。

ドロップ シャドウ効果は、要素がその背後の表面に影を落としているように見える視覚効果で、奥行きと立体感を与えます。 ドロップ シャドウは、要素と背景の間に分離感を生み出すためにテキストや画像に適用されることがよくあります。

一方、不透明度フィルターは要素の透明度を制御します。

を組み合わせると、影を落とす（）そして不透明度()フィルターを使用すると、テキスト要素に微妙な効果を加えることができます。

例えば：

この例では、ドロップ シャドウは右に 10 ピクセル、下に 9 ピクセルの位置に配置され、ぼかし半径は 9 ピクセルです。 影の色はベージュに指定されています。 不透明度 70% も指定されます。

CSS ブレンド モードは、要素のコンテンツが背景や他の要素とどのようにブレンドされるかを制御し、創造的な合成効果を可能にします。

CSS ブレンド モードの最も一般的な使用例には次のようなものがあります。

最も一般的な 2 つのブレンド モードは次のとおりです。背景ブレンドモードそしてミックスブレンドモード 。 どちらのプロパティも同じ 15 の値 (通常、乗算、スクリーン、オーバーレイ、暗くする、明るくする、覆い焼きカラー、彩度、焼き込みカラー、明度、差分、ハードライト、ソフトライト、除外、色相) を共有します。

使用する必要があります背景ブレンドモード要素上の背景画像など、複数の背景レイアウトがあり、それらをすべて互いにブレンドしたい場合。

を使用することもできますミックスブレンドモード特定の要素のコンテンツをその直接の親のコンテンツとブレンドします。 のミックスブレンドモード通常、テキスト、図形、画像などの前景コンテンツをブレンドするために使用されます。

使用例は次のとおりですミックスブレンドモードテキストと画像をブレンドします。

HTML:

CSS:

の違いブレンド モードは、テキストのカラー値とその下にある暗い画像の間の絶対的な差を計算します。

このシナリオでは、テキストの色が暗い背景と相互作用するため、高いコントラスト効果が得られます。

フィルターとブレンド モードを組み合わせて、さらに視覚的に興味深い効果を作成できます。 両方のプロパティを一緒に使用すると、他の CSS プロパティでは再現するのが難しい、ユニークで創造的な結果を実現できます。

以下は、フィルターとブレンド モードを組み合わせて、より複雑な効果を作成する例です。

このコードはフィルターを結合します。輝度、色相回転、影を落とす、そしてミックスブレンドモード価値のある画面画像に。 明るさが 150% 増加しますが、ue-回転画像の色を 180 度反転します。

さらにドロップシャドウも適用されます。 最後に、画面ブレンド モードの値は、画像の色とその下の背景を組み合わせ、明るい色が強調され、暗い色が背景とブレンドされる効果をもたらします。

さまざまなタイプの CSS フィルターと、それらを HTML 要素に適用する方法について学習しました。 ぼかし、コントラスト、色相回転などのさまざまなフィルター機能を使用して、画像の外観を変更できます。 また、実際のブレンド モードの例と、それを使用してユニークなデザインを作成する方法についても説明しました。

これらのテクニックをさらに試してみると、デザインに視覚的な魅力をさらに加えることができます。

Nobleokafor は、プログラミング分野で 3 年以上の経験を持つ熟練したソフトウェア エンジニアです。 彼は、最適化された JavaScript、ネイティブおよびクロスプラットフォームのモバイルおよび Web ソフトウェア ソリューションを構築することに情熱を持っています。 彼は 1 年以上の執筆経験を持つ技術記事を通じて、自身の知識と教訓を文書化するよう努めています。 これらの記事の主な焦点と目的は、ソフトウェア エンジニアリングのトピックに関する複雑さを単純化することです。