Webデザイン、ホームページを作成する際に楽しくなるのはCSSで様々な表現をしていくことですよね。本記事では画像に対してCSSだけで付与できるフィルターの紹介です。
CSSを使用して画像にフィルターを適用することで、ウェブサイトのデザインにさまざまな効果を加えることができます。本記事では、CSSフィルターの基本から、具体的な使い方、さらには複数のフィルターを組み合わせる方法まで詳しく解説します。初心者から上級者まで、幅広いデザイナーに役立つ情報をお届けします。
1. はじめに
ウェブデザインにおいて、画像の見せ方は非常に重要です。CSSのフィルター機能を使うと、画像に簡単にエフェクトを追加でき、サイトのデザインを一段と引き立てることができます。本記事では、CSSフィルターの基本的な使い方と応用例を紹介します。
2. CSSフィルターの基本
CSSフィルターは、filterプロパティを使用して画像に効果を加えることができます。以下は、代表的なフィルターとその効果です。
blur(px):ぼかし
画像をぼかします。pxにはぼかしのピクセル数を指定します。
img {
filter: blur(5px);
}
brightness(%):明るさ
画像の明るさを調整します。%には明るさの割合を指定します。
img {
filter: brightness(150%);
}contrast(%):コントラスト
画像のコントラストを調整します。%にはコントラストの割合を指定します。
img {
filter: contrast(200%);
}grayscale(%):白黒
画像を白黒にします。%にはグレースケールの割合を指定します。
img {
filter: grayscale(100%);
}sepia(%):セピア色
画像をセピア色にします。%にはセピアの割合を指定します。
img {
filter: sepia(100%);
}hue-rotate(deg):色相環の回転
画像の色相を回転します。degには回転する角度を指定します。
img {
filter: hue-rotate(90deg);
}opacity(%):透明度
画像の不透明度を調整します。%には不透明度の割合を指定します。
img {
filter: opacity(50%);
}複数のフィルターを組み合わせる
CSSフィルターは一つの画像に対して複数のフィルターを同時に適用できます。
これにより、複雑でユニークな効果を作り出すことが可能です。以下は、ぼかし効果とグレースケールを組み合わせた例です。
img {
filter: blur(2px) grayscale(50%);
}実践的な使用例
実際のウェブデザインでどのようにCSSフィルターが使われるかを見てみましょう。
ホバーフィルター効果
画像にカーソルを合わせたときにフィルター効果を適用することで、インタラクティブなデザインを実現できます。
img:hover {
filter: brightness(120%) contrast(110%);
}固定フィルター効果
全体のデザインに統一感を持たせるために、特定のフィルターを全ての画像に適用することもあります。
img {
filter: sepia(30%) contrast(120%);
}まとめ
CSSフィルターは、画像の魅力を引き出す強力なツールです。フィルターをうまく使うことで、サイトのデザインに深みや動きを加えられます。ぜひ様々な組み合わせを試して、独自のスタイルを作り出してみてください。
