HTMLとCSSを使用して塗りつぶしの色を削除して画像の色を変更するにはどうすればよいですか?

Web 開発の世界では、Web サイトに魅力的なビジュアルを追加するには、最新の CSS および HTML テクノロジーを理解することが重要です。そのような効果の 1 つがカラー ドロップ効果です。これを使用すると、画像の上に塗りつぶしの色を配置することで、ホバー時に画像の色を変更できます。

この効果を使用すると、Web サイトをよりインタラクティブで訪問者にとって魅力的なものにすることができます。この記事では、HTML と CSS を使用してカラー ドロップ エフェクトを作成するプロセスを説明します。したがって、初心者であろうと経験豊富な Web 開発者であろうと、このエキサイティングなビジュアルについて学ぶのを楽しみにしていてください。

ドロップフィルカラーエフェクトとは何ですか?

ドロップ塗りつぶしカラー効果は、HTML と CSS を使用して画像またはグラフィックに適用される視覚効果で、マウスを画像の上に置くと色のドロップが画像上に表示され、画像の色が変わります。

このエフェクトは、色が画像に滴り、その上に広がるような錯覚を生み出し、ドラマチックでダイナミックな効果を生み出します。この効果を使用すると、Web サイトにインタラクティブ性と視覚的な魅力を追加し、ユーザーの関心を高めることができます。

この効果を実現するには、特定のプロパティを使用する必要があります。それらを 1 つずつ見てみましょう -

• Filter プロパティ - CSS の filter プロパティは、要素のコンテンツに視覚効果を適用するために使用されます。さまざまなフィルター機能を使用して、画像やその他のグラフィック要素の外観を調整できます。

filter 属性には、順次適用される 1 つ以上のフィルター関数を指定できます。利用可能なさまざまなフィルター関数があり、それぞれが異なるタイプの視覚効果を適用します。

• clip-path プロパティ -clip-path CSS プロパティは、要素の表示領域を定義する非長方形領域であるクリッピング パスを作成するために使用されます。このプロパティは、クリッピング パスの範囲を超えた要素の部分を非表示にするために使用され、以前はイメージ マスクまたは SVG でのみ可能であった複雑な形状や効果を可能にします。

• ::before 擬似要素 -CSS の ::before 擬似要素は、要素のコンテンツの前に挿入される擬似要素を作成します。これは、追加の HTML タグを追加せずに、要素の前にコンテンツを挿入するために使用されます。

::before 疑似要素の一般的な使用法は、要素の前にアイコンや図形などの装飾コンテンツを追加することです。 ::before 疑似要素を使用して、テキスト、背景画像、その他のコンテンツを追加することもできます。

従うべき手順

この例で実行される手順は次のとおりです -

• ステップ 1 - .icon-container div を使用して、アイコン/画像コンテナーを作成します。 box-sizing: border-box をページ上のすべての要素に適用し、すべての要素のマージンとパディングを 0 に設定します。

• ステップ 2 - 次に、body 要素を display: flex および justify-content: center および # に設定します。 ##align-items: center コンテナー要素をページ上で垂直方向と水平方向の中央に配置します。 body 要素の背景色は濃い灰色の (#333) に設定されます。

• ステップ 3 -次に、カラー ドロップ効果を使用してコンテナ要素にスタイルを追加する必要があります。相対的な位置、幅と高さ 200 ピクセル、および中央に配置されコンテナ要素全体を覆う背景画像が指定されています。

filter 属性は背景画像をグレースケール (つまり白黒) に設定するために使用され、cursor 属性は pointer に設定されて、要素がクリック可能であることをユーザーに伝えます。 b>

• ステップ 4 - 次に、ホバー時のカラー ドロップ エフェクトを作成します。 ::before 擬似要素を使用して白い円を作成します。ホバーするとこの円がクリップされ、下にある背景画像が表示されます。

clip-path プロパティを circle(0% at 50% 0%) に設定します。半径 0% のクリッピング円 (つまり、表示領域なし) で始まります。コンテナ要素の中央上部にあります。

マウスを要素の上に置くと、

clip-path プロパティが circle(100% at 50% 0%) に遷移し、要素をカバーするクリップパスが作成されます。コンテナ要素全体。丸い。この遷移アニメーションの継続時間は、イーズアウト タイム関数を使用して 0.4 秒です。

＃＃＃例＃＃＃

例を見てみましょう -

リーリー ＃＃＃結論は＃＃＃

要約すると、HTML と CSS でカラー ドロップ効果を使用すると、Web サイトまたは Web アプリケーションの視覚的な魅力を高める楽しく創造的な方法になります。ホバー時に画像の色を変更できる機能を使用すると、動的な要素を追加してユーザーの注意を引き、コンテンツを目立たせることができます。

この記事では、カラー ドリップ エフェクトを使用して画像の色を変更する基本について説明しました。 filter 属性を使用して画像のグレースケールを操作すること、:before 擬似要素を使用してオーバーレイ効果を作成すること、clip-path 属性を使用してホバー時に色を表示する円形マスクを作成することについて説明しました。

この効果を実装すると、より魅力的なユーザー エクスペリエンスを作成し、Web サイトにパーソナライゼーションを追加できます。いくつかの実験と創造性を加えれば、このテクニックを次のレベルに引き上げ、より目立つ色のより複雑な滴り効果を作成することもできます。

以上がHTMLとCSSを使用して塗りつぶしの色を削除して画像の色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。