ホームページ > 記事 > ウェブフロントエンド > 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);