CSS+DIV Web ページ スタイルとレイアウト フィルターの使用に習熟している_html/css_WEB-ITnose
前回のブログでは、CSSの使い方と実践的なメニューの作成方法をエディターが簡単に紹介しましたが、今日はCSSのフィルターの使い方を簡単に紹介します。エディターはフィルターの使用方法について簡単に説明します。次に、フィルターはブラウザーのプラグインではありません。 、ブラウザの機能を強化するために Microsoft によって特別に開発され、IE ブラウザに統合された疲れた機能のコレクションです。ブラウザIEは用途が広いため、CSSフィルターもデザイナーに愛用されています。 CSS フィルターのロゴは「Filter」です。一般に、他の CSS ステートメントと同様に、非常に単純です。次に、マインド マップを見てみましょう。Xiaobian は上記の思考マップに従います。順番に簡単に紹介します。まず、アルファ チャネルのサンプル コードと実行効果を見てみましょう。 OUT オフ ''s' OUT 右out‐‐‐‐‐‐‐‐‐'''' to
、最初の画像と比較して、2 番目の画像はより強い夜効果を持っています。 CSS コードを見てみましょう。 ここでは、filter:alpha(opacity. =20); もちろん、表示を確認するために別の値を設定することもできます。次にぼかしを見てみましょう。Photoshop を使用せずにぼかし効果を作成できます。サンプルコードと実行中のエフェクトを見てみましょう:
Blur Blur
<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>alpha滤镜</title><style><!--body{ background:url(bg1.jpg); margin:20px;}img{ border:1px solid #d58000;}.alpha{ filter:alpha(opacity=50);}--></style> </head><body><img src="building1.jpg" border="0"> <img src="building1.jpg" border="0" class="alpha"></body></html></span></span>上の例を分析し、2 番目の図では class= Blur を使用しています。 "、この文が表示されます。 filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false); ここで、ぼかし効果
ピクセル半径をさまざまな値に設定します。さまざまなぼかし効果を見ることができます。友達は自分で試すことができます。次に、透明カラー フィルターを見てみましょう。サンプル コードと実行中の効果を見てみましょう。 ‐ ‐‐‐‐ そして � の金色本文がフィルタリングされた次の文を見てみましょう: filter:chroma(color=FF6800); これは金色を削除します。フリップフィルターを続けて見てみましょう。 CSS は、画像を処理せずに画像を反転できます。以下のコード例と実行中の効果を参照してください:
Flip flick
<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>Blur滤镜</title><style><!--body{ margin:10px;}.blur{ filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}--></style> </head><body><img src="building9.jpg"> <img src="building9.jpg" class="blur"></body></html></span></span>実行中の効果は次のとおりです:
分析 上記の例を考えてみましょう。実際には 4 つあります。最初の画像 (左上隅) は元のフィルムで、2 番目の画像は垂直方向にミラーリングされ、右下隅は水平方向と垂直方向にミラーリングされています。コードを見てみましょう: また、flip1 が水平に反転されていることがわかります。Photoshop には強力なマスク関数があります。サンプル コードと実行エフェクトを見てみましょう。
Mask
<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>chroma滤镜</title><style><!--body{ margin:10px;}.chroma{ filter:chroma(color=FF6800); /* 去掉金黄色 */}--></style> </head><body> <img src="tiger.gif"> <img src="tiger.gif" class="chroma"></body></html></span></span>
実行中のエフェクトは次のとおりです:
上の例を分析すると、影の変更エフェクトに少し似ている 2 番目の画像が表示されます。 CSS コードでは、最初の画像は処理されず、2 番目の画像はマスクされます。次の文を見てみましょう: filter:mask(color=RED); これはマスクする必要がある色です。引き続き、最適なフィルターである波フィルターを見てみましょう。波の効果を実現するには、Photoshop をよく使用します。サンプル コードと実行効果を見てみましょう。
<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>Flip翻转</title><style><!--body{ margin:12px; background:#000000;}.flip1{ filter:fliph; /* 水平翻转 */}.flip2{ filter:flipv; /* 竖直翻转 */}.flip3{ filter:flipv fliph; /* 水平、竖直同时翻转 */}--></style> </head><body><img src="building4.jpg"><img src="building4.jpg" class="flip1"><br><img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3"></body></html></span></span>上記を分析します。 たとえば、ここに 3 つの段落のテキストがあり、それぞれが波効果を使用しています:
(add=0,freq=2,lightstrength=70,phase=75,strength=4) )、表現される周波数は 2、最終的にレベルの次数は 4 です。最後に、3 つのフィルターでどのような魔法の効果が使用されるかを包括的な例で見てみましょう。
編集者からのメッセージ: このブログ投稿では、編集者が、アルファ チャネル、ぼかし、透明色などを含む CSS のフィルターに関する関連知識ポイントと、最後の小さな例である 3 つのフィルターを簡単に紹介します。同時に、エフェクトをより美しくゴージャスにしたい場合、編集者は依然として Photoshop を使用することを推奨しています。結局のところ、これらの小さなサンプルの表示効果は、さまざまな BS 学習によって異なります。 ..
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7318
9
1625
14
1349
46
1261
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
