css3のフィルターによる様々な特殊効果

css3 のフィルターのさまざまな特殊効果

css3 のフィルター属性は、シンプルで使いやすく、強力であると言えます。これらの効果は、いくつかの特殊効果を実現するために画像に適用されます (ビデオにも適用できますが、画像のみが特殊です)。影響についてはここで説明します)。

ブラウザの互換性

現時点では、主要なブラウザの CSS3 互換性は非常に優れていますが、IE9 より前のバージョンはまだサポートされていません。これらのアンティーク。さらに、IE フィルターも使用できますが、これについては別途説明します。

仕様で現在サポートされている効果は次のとおりです:

grayscale グレースケール 値は 0 ～ 1 の間の 10 進数です。

セピア ブラウン 値は 0 ～ 1 の間の小数です。

saturate 彩度の値は num

hue-rotate です。色相の回転値は角度

invert、反転値は0-1の10進数

不透明度、透明度の値は0-1の10進数

brightness、明るさの値は0-1の10進数

コントラスト値は num

blur ぼかし値は length

drop-shadowshadow

使用法は次のような標準的な CSS 記述方法です:

-webkit-filter: Blur(2px);

テストブラウザは Chrom ブラウザですバージョン44.0、サンプル画像の上部が元の画像、下部がフィフターエフェクトを追加した後の画像です。

グレースケール

このエフェクトパラメータに値がない場合、100%でレンダリングされ、0〜1の間の値は異なるグレースケールになります。次の例は 100% レンダリングです: -webkit-filter:grayscale(1) ;

sepia

茶色は Meitu Xiuxiu の nostalgia 機能の効果で、値も -webkit- です。 filter:sepia(1) ;

saturate saturate

この属性は画像の彩度を変更します。値の範囲は数値です。デフォルト値は 800% です。 6) ;

hue-rotate 色相回転

Hue-rotate は画像の色相を変更するために使用されます。デフォルト値は 0deg で、値は angle です。 例: -webkit-filter:hue-rotate( 180deg)

invert reverse color

invert の効果は、写真のネガの効果といくぶん似ています。例: -webkit-filter:invert(1)

opacity traditional

この属性は、多くの場合、例: -webkit-filter:opacity(0.3)

brightness 明るさ

画像の明るさを変更します。デフォルト値は 100% です。例: -webkit-filter:brightness(0.5)

contrast コントラスト

この属性値 saturate と同様、例 500%: -webkit-filter:contrast(5)

blur ブラー

この属性は画像の明瞭度を変更します。デフォルト値は 0 です。例: -webkit-filter:blur(1px)

drop-shadowshadow

これは box-shadow に似ています。画像のシャドウに追加します。例: -webkit-filter:drop-shadow(10px 10px 10px #000)

もちろん、複数の属性を追加することも可能です。例: -webkit-filter:saturate(10) hue -回転(500度) グレースケール(0.3) セピア(0.7) コントラスト(2.5) 反転(0.2) 明るさ(1.2);