• Home
  • Web制作
  • 【CSS】要素をぼかして魅せる！ filter:blurを使いこなすテクニック

【CSS】要素をぼかして魅せる！ filter:blurを使いこなすテクニック

schedule update
Tags: CSS

はじめに

Webサイトのデザインにおいて、画像やテキストにぼかし効果を加えることで、奥行きや立体感を演出することができます。 CSSのfilter:blurを使えば、誰でも簡単に要素をぼかすことが可能です。

今回は、filter:blurの基本的な使い方から、応用例、そして注意点まで詳しく解説していきます。

あわせて読みたい
CSSフィルターで画像編集！表現力を広げるテクニックを紹介

1. filter:blurの基本

filter:blurは、要素にぼかし効果をかけるプロパティです。 使い方はとてもシンプルで、ぼかしの強さを指定するだけです。

基本的な記述方法

.blur {
  filter: blur(ぼかしの強さ);
}

ぼかしの強さは、ピクセル(px)やパーセント(%)で指定します。 値が大きいほど、ぼかしが強くなります。

ぼかしの強さを指定する単位

  • px: 画面上のピクセル数でぼかしの強さを指定します。
  • %: 要素のサイズのパーセンテージでぼかしの強さを指定します。

使用例

.blur-example {
  filter: blur(5px); /* 5ピクセルぼかす */
}

2. filter:blurで表現できる様々なぼかし効果

filter:blurは、単に要素をぼかすだけでなく、他のCSSプロパティと組み合わせることで、より多彩な表現を可能にします。

2-1. 背景画像をぼかして奥行きを演出する

背景画像にfilter:blurを適用することで、奥行きのある表現が可能になります。 テキストを画像の上に重ねる場合、背景画像にぼかし効果を加えることで、テキストが見やすくなります。

使用例

.background-blur {
  background-image: url("sample.jpg"); /* 背景画像 */
  filter: blur(10px); /* ぼかし効果 */
}

2-2. ホバーエフェクトに動きを加える

ホバー時にfilter:blurの値を変化させることで、動きのあるエフェクトを作成できます。 例えば、画像にマウスオーバーした際にぼかしが弱くなることで、ユーザーの注意を惹きつけることができます。

使用例

.hover-blur img {
  transition: filter 0.3s ease; /* ホバー時の変化を滑らかにする */
}

.hover-blur img:hover {
  filter: blur(0px); /* マウスオーバー時にぼかしを解除 */
}

3. filter:blur使用時の注意点

filter:blurは便利な反面、使用上の注意点もいくつかあります。

  • パフォーマンスへの影響: ぼかし効果は、処理に負荷がかかるため、多用するとページの表示速度が遅くなる可能性があります。
  • テキストの見え方: テキストにぼかしをかけると、可読性が低下する可能性があります。
  • 効果範囲: ぼかし効果は、要素の中身だけでなく、境界線や余白も含めて適用されます。

4. まとめ

filter:blurは、Webサイトに奥行きや動きを簡単に加えることができる便利なプロパティです。 基本的な使い方をマスターすれば、様々な表現に挑戦できます。

注意点を守りながら、効果的に活用して、魅力的なWebサイトを作成しましょう。

関連記事