ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS+DIV Web ページ スタイルとレイアウト フィルターの使用に習熟している_html/css_WEB-ITnose
CSS+DIV Web ページ スタイルとレイアウト フィルターの使用に習熟している_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:50:471189ブラウズ
前回のブログでは、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 学習によって異なります。 ..