CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのfilterプロパティで画像フィルターを作成する方法（ぼかし・コントラスト・明るさ）

CSSで画像フィルターを実装する方法

CSSのfilterプロパティを使うと、画像にさまざまな視覚効果を簡単に適用できます。本記事では、代表的なフィルターである「ぼかし（blur）」「コントラスト（contrast）」「明るさ（brightness）」の使い方を、実際のコード例とともに解説します。

主なfilter関数の種類

  • blur()： 画像にぼかし効果を加えます。値はピクセル（px）で指定し、数値が大きいほど強くぼやけます。
  • contrast()： 画像の明暗差（コントラスト）を調整します。100%が元の状態で、数値を上げるとコントラストが強調されます。
  • brightness()： 画像の明るさを調整します。100%が元の状態で、250%と指定すれば2.5倍の明るさになります。

実装例

以下のコードでは、同じ1枚の画像に対して「通常表示」「コントラスト強調」「明るさ変更」「ぼかし」の4パターンを適用して比較できるようにしています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            height: auto;
            float: left;
         }
         .contrast {
            -webkit-filter: contrast(180%);
            filter: contrast(180%);
         }
         .brightness {
            -webkit-filter: brightness(250%);
            filter: brightness(250%);
         }
         .blur {
            -webkit-filter: blur(4px);
            filter: blur(4px);
         }
      </style>
   </head>
   <body>
      <img src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt="Animation Training" width="200" height="200">

      <img class="contrast" src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt="Animation Training" width="200" height="200">

      <img class="brightness" src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt="Animation Training" width="200" height="200">

      <img class="blur" src="https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt="Animation Training" width="200" height="200">
   </body>
</html>

コードのポイント

各クラスには-webkit-filterとfilterの両方を指定しています。-webkit-filterは古いバージョンのSafariなどWebKit系ブラウザ向けのベンダープレフィックスです。現在の主要ブラウザでは標準のfilterプロパティのみで問題なく動作しますが、幅広い環境への対応を考慮して両方を記述しておくと安心です。

また、複数のフィルターを組み合わせることも可能です。例えばfilter: blur(2px) brightness(120%);のようにスペース区切りで指定すると、ぼかしながら明るさも上げるといった表現が一行で実現できます。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>