blur は、ブレさせるフィルタです。
ブレの強さや方向を指定できます。
#example {
filter: blur(add=true, direction=90, strength=10);
}
| add | ブレの上に元の内容を重ねるかどうか 0（false） = 重ねない｜1（true） = 重ねる |
|---|---|
| direction | ブレの方向（45度単位） 0 = 上｜45 = 右上｜90 = 右｜135 = 右下｜180 = 下｜225 = 左下｜270 = 左｜315 = 左上 |
| strength | ブレの距離（ピクセル） |
【フィルタなしの状態】
<img src="image/friend.gif" alt="IMG" width="170" height="140">
<div style="font: bold 170% sans-serif; width: 100%;">
フィルタの表示テスト
</div>
【ブレの距離】
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: blur(strength=30);">
<div style="width: 100%; padding-left: 30px; filter: blur(strength=30);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
<div style="font: bold 170% sans-serif; width: 100%; padding-left: 10px; filter: blur(strength=10);">
フィルタの表示テスト
</div>
【ブレの方向】
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: blur(direction=0, strength=30);">
<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: blur(direction=180, strength=10);">
フィルタの表示テスト
</div>
【重ねない】
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: blur(add=false, direction=315, strength=20);">
<div style="font: bold 170% sans-serif; width: 100%; filter: blur(add=false, direction=90, strength=15);">
フィルタの表示テスト
</div>
