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

CSS3のfilterプロパティで実現するフィルター効果の使い方

CSS3フィルター効果とは

CSS3では、filterプロパティを使用することで、画像や要素にさまざまな視覚的なフィルター効果を簡単に適用できます。ぼかし、明るさ、コントラスト、色調の変更など、画像編集ソフトのようなエフェクトをCSSだけで実現できるのが大きな特徴です。

使用できるフィルター関数の一覧

filterプロパティには、以下のようなフィルター効果を設定できます。

blur() | brightness() | contrast() | grayscale() | invert() | opacity() | saturate() | url();

それぞれの主な役割は以下のとおりです。

  • blur(): 要素にぼかし（ブラー）を加える
  • brightness(): 明るさを調整する
  • contrast(): コントラストを調整する
  • grayscale(): グレースケール（白黒）に変換する
  • invert(): 色を反転させる（ネガポジ反転）
  • opacity(): 透明度を設定する
  • saturate(): 彩度を調整する
  • url(): SVGフィルターへの参照を指定する

CSS3フィルター効果の実装例

以下は、同じ画像に対してinvert(100%)を使って色を反転させた例です。通常の画像と比較することで、フィルター効果がどのように適用されるかを確認できます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
    margin: 20px;
    width: 200px;
    height: 200px;
}
img.normal {
    margin-left: 30%;
}
img.filter {
    filter: invert(100%);
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS3 Filter effect example</h1>
<img class="normal" src="https://i.picsum.photos/id/237/536/354.jpg">
<img class="filter" src="https://i.picsum.photos/id/237/536/354.jpg">
</body>
</html>

コードの解説

このコードでは、まずすべてのimg要素に共通のマージンとサイズ（200px × 200px）を指定しています。次に、.normalクラスを持つ画像はそのまま表示され、.filterクラスを持つ画像にはfilter: invert(100%);が適用され、色が完全に反転して表示されます。

実行結果

上記のコードを実行すると、左側に元の画像、右側に色が反転された画像が並んで表示されます。このように、CSSのfilterプロパティを使えば、JavaScriptや画像編集ツールに頼らずとも、手軽にリッチな視覚効果をWebページに追加できます。

複数のフィルター関数を組み合わせて指定することも可能です。たとえばfilter: blur(2px) brightness(1.2) grayscale(50%);のように記述すると、複数の効果を同時に適用できます。

  1. CSS3の3D変換関数の使い方を徹底解説！matrix3dやtranslate3dの基本

    CSS3の3D変換（3D Transform）を活用すると、要素をX軸・Y軸に加えてZ軸（奥行き）方向にも移動させることができます。2D変換では表現できない立体感のある演出が可能になり、モダンなWebデザインにおいて非常に強力な機能です。 CSS3で使える主な3D変換関数 3D変換を呼び出すために使用される主なメソッドは以下の通りです。 番号値と説明 1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)16個の値からなる行列を使用して、要素を変換します。 2translate3d(x,y,z)X軸・Y軸・Z軸の3つの値を使って、要素を移動します。 3t

  2. CSS3で複数の背景画像を追加する方法

    CSS3では、background-imageプロパティを使うことで、1つの要素に複数の背景画像を簡単に追加できます。各背景画像はカンマ（,）で区切って指定し、表示順序は先に書いたものが前面に、後ろに書いたものが背面に配置されます。 さらに、background-positionやbackground-repeatなどの関連プロパティも、背景画像と同じ順番でカンマ区切りで指定することで、それぞれの画像に対して個別の設定が可能です。 サンプルコード 以下は、CSS3で複数の背景を追加する具体例です。 <!DOCTYPE html> <html> <head>