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衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1669
14
1428
52
1329
25
1273
29
1256
24
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTML、CSS、およびJavaScriptの未来：Web開発動向
Apr 19, 2025 am 12:02 AM
HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要
Apr 16, 2025 am 12:04 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML：Webページの構造の構築
Apr 14, 2025 am 12:14 AM
HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
HTML対CSSおよびJavaScript：Webテクノロジーの比較
Apr 23, 2025 am 12:05 AM
HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。
HTML：それはプログラミング言語か何か他のものですか？
Apr 15, 2025 am 12:13 AM
htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。
＆lt; strong＆gt;＆lt; b＆gt;の違いは何ですかタグと＆lt; em＆gt;＆lt; i＆gt;タグ？
Apr 28, 2025 pm 05:42 PM
この記事では、HTMLタグの違いについて説明します。、、、、、、、およびプレゼンテーションの使用とSEOとアクセシビリティへの影響に焦点を当てています。
