ワンランク上のデザインへ！CSSフィルターの意外な機能

CSS フィルターのその他の機能

変形系フィルター

• hue-rotate: 画像の色合いを回転させます。
  • 例：filter: hue-rotate(90deg); は、画像を 90 度回転させ、青みがかった色合いになります。
• saturate: 画像の彩度を調整します。
  • 例：filter: saturate(200%); は、画像の彩度を 2 倍に増し、鮮やかな色合いになります。
• sepia: 画像をセピア調に変換します。
  • 例：filter: sepia(100%); は、画像を完全にセピア調に変換します。

ぼかし系フィルター

• blur: 画像にぼかし効果を適用します。
  • 例：filter: blur(5px); は、画像に半径 5px のぼかし効果を適用します。
• url: 外部画像をぼかしフィルターとして使用します。
  • 例：filter: url(https://example.com/blur.svg); は、blur.svg 画像をぼかしフィルターとして適用します。

その他のフィルター

• grayscale: 画像をグレースケールに変換します。
  • 例：filter: grayscale(100%); は、画像を完全にグレースケールに変換します。
• contrast: 画像のコントラストを調整します。
  • 例：filter: contrast(200%); は、画像のコントラストを 2 倍に増し、明暗差を強調します。
• invert: 画像の色を反転します。
  • 例：filter: invert(100%); は、画像の色を完全に反転します。

上記以外にも、CSS フィルターにはさまざまな機能が用意されています。これらの機能を組み合わせることで、独創的な視覚効果を実現することができます。

補足

• 上記の例はあくまで基本的な使い方です。各フィルターには、さまざまなオプションやパラメータを設定することができます。
• 多くのブラウザは、CSS フィルターをハードウェアアクセラレーションで処理するため、パフォーマンスが向上します。
• 古いブラウザでは、一部の CSS フィルターがサポートされていない場合があります。

CSS フィルターのサンプルコード

画像にぼかし効果を適用する

<img src="image.jpg" alt="Image">

img {
  filter: blur(5px);
}

画像をセピア調に変換する

<img src="image.jpg" alt="Image">

img {
  filter: sepia(100%);
}

画像の色合いを回転させる

<img src="image.jpg" alt="Image">

img {
  filter: hue-rotate(90deg);
}

画像をグレースケールに変換する

<img src="image.jpg" alt="Image">

img {
  filter: grayscale(100%);
}

画像のコントラストを調整する

<img src="image.jpg" alt="Image">

img {
  filter: contrast(200%);
}

画像の色を反転する

<img src="image.jpg" alt="Image">

img {
  filter: invert(100%);
}

複数のフィルターを組み合わせる

<img src="image.jpg" alt="Image">

img {
  filter: blur(5px) sepia(50%);
}

外部画像をぼかしフィルターとして使用

<img src="image.jpg" alt="Image">

img {
  filter: url(https://example.com/blur.svg);
}

CSS フィルターのその他の方法

filter プロパティの値は、カンマ区切りで複数のフィルターを指定できます。

img {
  filter: blur(5px) sepia(50%);
}

@keyframes ルールを使用して、フィルタープロパティの値をアニメーション化できます。

@keyframes my-animation {
  from {
    filter: blur(0px);
  }
  to {
    filter: blur(10px);
  }
}

img {
  animation: my-animation 2s linear infinite;
}

JavaScriptを使用して、フィルタープロパティの値を動的に変更できます。

<img src="image.jpg" alt="Image" id="my-image">

const image = document.getElementById("my-image");

image.style.filter = "blur(5px)";

// 5秒後にぼかし効果を解除
setTimeout(() => {
  image.style.filter = "none";
}, 5000);

CSS フレームワーク

Bootstrap や Materialize などの CSS フレームワークは、フィルター機能を簡単に利用できる便利なコンポーネントを提供しています。

その他のヒント

• caniuse.com のようなサイトで、ブラウザの CSS フィルターのサポート状況を確認できます。

CSS フィルターは、画像や要素にさまざまな視覚効果を適用できる強力なツールです。上記の方法を参考に、創造的な表現を試してみてください。