Webサイトの見た目をちょっと工夫したいときに便利なのが、CSSのfilterプロパティです。
画像や背景をぼかしたり、色味を整えたりといった処理を画像編集ソフトに頼らず、コードベースで加工することができます。
- サムネイル画像をモノクロにして、hover時にカラーに戻す演出
- 背景画像をぼかして、その上に文字を配置し可読性を高める
- テーマカラーに合わせて、画像全体の色調を
hue-rotateで調整
といったように、デザイン調整やUI演出の効率化にも役立ちます。
filterプロパティにはさまざまな効果が用意されており、目的に応じて使い分けることができます。ここでは、フィルターの種類ごとに代表的なものを紹介します。
主なフィルターの種類
ぼかし・明暗調整
| blur(px) | ぼかし |
| brightness(%) | 明るさ調整（100%が基準） |
| contrast(%) | コントラストを調整（100%が基準） |
blur(5px)をかけたimg
色調補正
| grayscale(%) | モノクロ化（100%で完全白黒） |
| sepia(%) | セピア調に変換 |
| invert(%) | 色を反転 |
| saturate(%) | 彩度を調整 |
| hue-rotate(deg) | 色相を回転 |
影をつける
| drop-shadow(x y blur color) | 透明部分を考慮した影を追加 |
CSS
img {
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}drop-shadowを付けたimg
複数のフィルターを組み合わせる
各フィルターをスペースで区切ることで、複数のフィルターを組み合わせることもできます。
CSS
img {
filter: grayscale(100%) blur(2px) brightness(120%);
}上記スタイルを付けたimg
カテゴリー : HTML-CSS
