Css3フィルター画像処理_html/css_WEB-ITnose

CSS3ではフィルター機能が追加されています

この機能はIE用のフィルターではありません

実際にやってみるとさらに魅力を感じると思います。よく見ると、これらの効果は Photoshop で作成されたように見えますが、実際には、多くの効果は Photoshop の特殊効果に似ています。ただし、特に注意する必要があることが 1 つあります: ここでの CSS3 フィルターと CSS フィルターはまったく別のものです。これは、私たちが話してきた IE フィルターではありません。それは正確には何を指しますか?興味のある方はここをクリックしてください。 これ以上は詳しく説明できないので、ここでお話ししたいのは、この「CSS3 フィルター」の使い方です。それでは始めましょう。

フィルター は、主に特殊効果を実現するために写真に使用されます。 （動画にも使えますが）ここでは写真での使用についてのみ説明します。

構文

      elm {        filter: none | <filter-function > [ <filter-function> ]*       }

デフォルト値はなし、継承はありません、フィルタ関数の値は次のオプション値です:

デフォルト値はなし、継承はありません、フィルタ関数の値は次のとおりです。次の値があります。 オプションの値:

grayscale

セピアブラウン (専門的な指導と翻訳を求めます)

saturate

hue-rotate 色相回転

invert

不透明度

明るさ

conトラスト

ぼかしぼかし

drop-shadow

ブラウザの互換性

現在、この属性をサポートしているブラウザは非常に少なく、Webkit のみがサポートしており、Webkit のナイトリー バージョンと Chrome 18.0.976 以降のみがサポートされているため、必要に応じて言ってください。効果を確認するには、これら 2 つのバージョンのいずれかをダウンロードする必要があります。私は Google Chrome Canary を使用しています。

互換性ソリューションについては、CSS3 Magic Hall: CSS3 フィルターと Canvas、SVG、および IE フィルターの代替の詳細な説明を参照してください