これで完璧！HTML & CSSのぼかし効果を使いこなしてワンランク上のWebデザインを実現しよう
2024-04-02
HTML & CSS で滑らかなぼかしを実現する方法
filter: blur() プロパティ
概要:
filter: blur() プロパティは、要素にぼかし効果を適用する最も簡単な方法です。このプロパティは、ぼかしの半径をピクセル単位で指定します。
コード例:
<div class="image">
<img src="image.jpg" alt="Image">
</div>
.image {
filter: blur(10px);
}
メリット:
- コードがシンプルで分かりやすい
- すべての主要なブラウザでサポートされている
- ぼかし効果が粗くなる場合がある
- ぼかしの形状を制御できない
box-shadow プロパティ
box-shadow プロパティは、要素に影を適用するプロパティですが、ぼかし効果も実現できます。box-shadow プロパティは、影の色、ぼかしの半径、影のオフセットなどを指定できます。
<div class="image">
<img src="image.jpg" alt="Image">
</div>
.image {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
- ぼかし効果をより細かく制御できる
- ぼかしの形状を円形、四角形、楕円形などに設定できる
- コードが少し複雑になる
- 古いブラウザではサポートされていない場合がある
SVG フィルター
SVG フィルターを使用して、より高度なぼかし効果を実現できます。SVG フィルターは、ぼかし以外にもさまざまな効果を適用することができます。
<svg width="100%" height="100%">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<image filter="url(#blur)" href="image.jpg" />
</svg>
- 最も高度なぼかし効果を実現できる
- ぼかし以外にもさまざまな効果を適用できる
- SVG に詳しくないと使いにくい
CSS ライブラリ
blur() プロパティや box-shadow プロパティよりも高度なぼかし効果を実現したい場合は、CSS ライブラリを使用することができます。代表的なライブラリには、以下のようなものがあります。
- コード量を削減できる
- ライブラリの追加読み込みが必要
- ライブラリの使い方が複雑になる場合がある
HTMLとCSSで滑らかなぼかし効果を実現するには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあるので、目的に合った方法を選択する必要があります。
補足
- 上記のコード例は、基本的な使い方を示しています。より詳細な情報は、各プロパティやライブラリのドキュメントを参照してください。
- ぼかし効果の強さは、ブラウザの設定やハードウェアによって異なって見える場合があります。
filter: blur() プロパティ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑らかなぼかし効果</title>
</head>
<body>
<div class="image">
<img src="image.jpg" alt="Image">
</div>
</body>
</html>
.image {
filter: blur(10px);
}
box-shadow プロパティ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑らかなぼかし効果</title>
</head>
<body>
<div class="image">
<img src="image.jpg" alt="Image">
</div>
</body>
</html>
.image {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
SVG フィルター
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑らかなぼかし効果</title>
</head>
<body>
<svg width="100%" height="100%">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<image filter="url(#blur)" href="image.jpg" />
</svg>
</body>
</html>
CSS ライブラリ
Blur.js
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑らかなぼかし効果</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blurjs/0.17.0/blur.min.js"></script>
</head>
<body>
<div class="image">
<img src="image.jpg" alt="Image">
</div>
<script>
blurjs.init();
const image = document.querySelector('.image img');
blurjs.blur(image, 10);
</script>
</body>
</html>
StackBlur
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑らかなぼかし効果</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
</head>
<body>
<div class="image">
<img src="image.jpg" alt="Image">
</div>
<script>
const image = document.querySelector('.image img');
StackBlur.image(image, 10);
</script>
</body>
</html>
その他の滑らかなぼかし効果を実現する方法
backdrop-filter プロパティ
backdrop-filter プロパティは、要素の背後にぼかし効果を適用するプロパティです。このプロパティは、ぼかしの半径とぼかしの種類を指定できます。
<div class="container">
<div class="content">
<h1>This is content</h1>
</div>
</div>
.container {
backdrop-filter: blur(10px);
}
- 要素の背景にしか適用できない
mask-image プロパティ
mask-image プロパティは、要素にマスク画像を適用するプロパティです。ぼかし効果を実現するには、ぼかし効果を表現した画像をマスク画像として使用します。
<div class="image">
<img src="image.jpg" alt="Image">
</div>
.image {
mask-image: url(blur.png);
}
- ぼかし効果の形状を自由に変更できる
- ぼかし効果を表現した画像を用意する必要がある
Canvas API
Canvas APIを使用して、ぼかし効果をプログラムで生成することができます。Canvas API は、JavaScriptを使用して画像を操作することができます。
<canvas width="100" height="100"></canvas>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// 画像を描画
const image = new Image();
image.onload = () => {
ctx.drawImage(image, 0, 0);
// ぼかし効果を適用
ctx.filter = 'blur(10px)';
// 画像を更新
ctx.drawImage(canvas, 0, 0);
};
image.src = 'image.jpg';
- ぼかし効果をアニメーション化できる
- JavaScript の知識が必要
html css
