JavaScript >> Javascript チュートリアル >  >> Tags >> CSS

簡単なヒント:CSS フィルターについて聞いたことがありますか?

何年にもわたって、CSS は、3D 変換であろうと境界半径であろうと、画像エディターなしで物事を達成する方法をますます提供してきました。ただし、このパズルに欠けているピースの 1 つは、CSS だけで写真を飽和させたり、ぼかしたり、その他の方法でフィルター処理したりする機能です。

この問題を解決するために、W3C は CSS フィルター を考案しました。 .フィルターを使用すると、画像だけでなく、テキストや HTML にも適用できる多くの効果を実現できます!

フィルタのサポート

CSS フィルター プロパティは、他の CSS プロパティと同じように機能します。ただし、いつものように、ブラウザのサポートは地上ではかなり薄いです。 フィルタをサポートするブラウザは Webkit ベース (Safari と Chrome) のみです .このため、ブラウザ プレフィックスを使用する必要があります。 . Webkit はフィルターをサポートする唯一のエンジンですが、ベスト プラクティスとしてすべてのブラウザー プレフィックスを使用します。

フィルターの使用

使用できる値はさまざまです。フィルターを使用する場合は、すべての訪問者がフィルターを表示できるわけではないことに注意してください。そのため、ユーザー エクスペリエンスに必要な方法でフィルターを使用しないことをお勧めします。以下は、画像に 5px のガウスぼかしを設定する例です:

img {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    -o-filter: blur(5px);
    filter: blur(5px);
}

フィルターにはもっと広い用途がありますが、別の例では、フィルターを使用して画像をグレースケール化しています:

img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

かなり単純ですね。グレースケールとぼかしは、膨大な数のフィルターのうちの 2 つにすぎません。詳細については、こちらのフィルターのより包括的なリストをご覧ください。少し試してみませんか?


  1. Nodejs のベスト プラクティス (パート 1 - 概要)

  2. マイクロフロントエンドのパターン比較

  3. アニメーション画像効果を作成する 20 個の jQuery プラグイン