ホームページ > 記事 > ウェブフロントエンド > CSSの基本チュートリアルのフィルター効果
1. アルファ フィルタ
構文:
{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, starty=starty,finishx=finishx,finishy=finishy)}
" アルファ" プロパティは、ターゲット要素を背景とブレンドします。デザイナーは数値を指定してブレンドの程度を制御できます。この「背景とのブレンド」は、口語的には要素の透明度として知られています。座標を指定することで、点、線、面の透明度を指定できます。
パラメータの意味は次のとおりです。
「不透明度」は透明度を表します。デフォルトの範囲は 0 ~ 100 で、実際にはパーセントです。つまり、0 は完全に透明を表し、100 は完全に不透明を表します。
「finishopacity」はオプションのパラメータです。グラデーションの透明度効果を設定したい場合は、これらを使用して最後の透明度を指定できます。範囲も 0 ~ 100 です。
「style」パラメータは、透明領域の形状特性を指定します。このうち、0は均一な形状、1は直線状、2は放射状、3は長方形を表す。
「startx」と「starty」は、グラデーション透明効果の開始 x 座標と y 座標を表します。
「finishx」と「finishy」は、グラデーション透明効果の終了の x 座標と y 座標を表します。
効果は次のとおりです。
2. ぼかしフィルター
構文: html の場合:
{ilter:blur(add=add,direction=direction,strength=strength)}
スクリプト言語の場合:
[oblurfilter=] object.filters.blur
油絵の上で指を使います。まだ乾いていません 早く動くと写真がぼやけてしまいます。 「ぼかし」でも同様のぼかし効果が得られます。
「add」パラメータは「true(デフォルト)」または「false」のブール判定です。画像を印象派のぼかし効果に変更するかどうかを指定します。ブラー効果は時計回りに実行されます。
「direction」パラメータはブラーの方向を設定するために使用されます。ここで、0 度は垂直上向きを表し、45 度ごとが単位となります。デフォルト値は左 270 度です。
「strength」値は整数を使用してのみ指定できます。これは幅が何ピクセルになるかを表します。ブラー効果の影響を受けます。デフォルトは 5 です。
web ページ上のフォントのぼかしを「add=1」に設定すると、フォントの効果が非常に美しくなります。次のように:
filter:blur(add=ture,direction=135,strength=10)
あなたのもとへ飛んで、雨は静かに降る!
3. fliph、flipv フィルタ
構文: {filter:filph}、{filter:filpv} はそれぞれ水平反転、垂直反転です。以下のように:
td> |
4. クロマフィルター
構文:
{filter:chroma(color=color)}
「chroma」属性はオブジェクトに指定した色を透明色に設定するパラメータであり、colorパラメータで透明にする色を指定します。以下は青色のテキストで、クロマ フィルターを使用して青色を除去すると、次のようになります。
filter:chroma(color=blue)
滴水岩坊
5. dropshadow フィルタ
構文:
{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}
「dropshaow」はその名の通り、オブジェクトに影の効果を加えるものです。オフセットを構築し、さらにより深いオフセットを構築することで機能します。
「color」は影の色を表し、「offx」と「offy」は x 方向、y 方向を表します。それぞれの方向 影のオフセット。
「正」パラメータが「true (0 以外)」の場合、ブール値になります。 "、次に、不透明なピクセルに可視シャドウを作成します。
「fasle (0)」の場合、透明ピクセルに透明効果を作成します。パート
td > | |
通常のテキスト | dropshadow(color=gray,offx=5,offy=5.positive=0) の後のテキスト
6. グローフィルター
構文:
{filter:glow(color=color,strength)}
オブジェクトで「glow」属性を使用する場合、このオブジェクトのエッジにはグローのような効果がかかります。 「color」は光の色、「strength」は強度を表し、強度は1~255の整数で指定できます。
filter:glow(color=red,strength=10) 後の効果
滴水岩茶館 / span>
filter:glow(color=#ffff00,strength=5) 後の効果
滴水岩茶館
photoshop は無視できるようです、はい ?
上記は基本cssのフィルター効果ですチュートリアルのコンテンツについては、php 中国語 web サイト (www.php.cn) に注目してください。関連コンテンツがさらに充実しています。