このページの目的
CSSのfilterプロパティを使い、画像に「ぼかし」や「モノクロ」といった様々な視覚効果を適用する方法を学びます。
ホバーエフェクトと組み合わせることで、画像加工ソフトを使わずに、インタラクティブで表現力豊かなサイトを構築できるようになります。
smart_display動作サンプル
実際に動作するサンプルです。下の画像にマウスカーソルを乗せると、様々なfilterエフェクトが適用されます。
blur (ぼかし)
grayscale (白黒)
sepia (セピア)
brightness (明るさ)
このサンプルを実装するためのHTMLとCSSのコードは以下の通りです。
buildfilterで使える主な関数
filterプロパティには、以下のような関数を指定することで、様々な効果を適用できます。
blur(半径)- ぼかし効果を適用します。半径が大きいほど、ぼかしが強くなります。（例:
blur(5px)） brightness(割合)- 明るさを調整します。
1が通常で、1.5なら明るく、0.5なら暗くなります。 contrast(割合)- コントラスト（明暗の差）を調整します。
grayscale(割合)- グレースケール（白黒）にします。
1（または100%）で完全な白黒になります。 sepia(割合)- セピア調にします。
1（または100%）で完全なセピア色になります。 saturate(割合)- 色の彩度を調整します。
1が通常で、値を大きくすると鮮やかに、小さくするとくすんだ色になります。 opacity(割合)- 要素全体の透明度を変更します。（
opacityプロパティと似ていますが、パフォーマンスの面で違いがあります）
これらの関数は、半角スペースで区切って複数同時に指定することも可能です。
例： filter: grayscale(1) brightness(0.8);
実装コード例
<!-- HTML -->
<img src="photo.jpg" alt="写真" class="image-effect">
<!-- CSS -->
.image-effect {
transition: filter 0.3s ease-out; /* 0.3秒かけて変化させる */
}
/* ホバーしたら、モノクロにして少し明るくする */
.image-effect:hover {
filter: grayscale(100%) brightness(1.2);
}