filter: blur(***);
ブラウザ |
|
---|---|
プロパティ |
|
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 |
ブレの距離 (ピクセル数) |
- このプロパティは、CSS 2では定義されていません。
使用例
<p><img src="example1.gif" alt="[サンプル]"></p>
<div style="font: bold 170% sans-serif; width: 100%;">
フィルタの表示テスト
</div>
フィルタの表示テスト
<p><img src="example1.gif" alt="[サンプル]" style="filter: blur(strength=30);"></p>
<div style="width: 100%; filter: blur(strength=30);">
<img src="example1.gif" alt="[サンプル]" style="margin-left: 30px;">
</div>
![[サンプル]](image/example1.gif)
<div style="font: bold 170% sans-serif; width: 10em; padding-left: 10px; filter: blur(strength=10);">
フィルタの表示テスト
</div>
フィルタの表示テスト
<p><img src="example1.gif" alt="[サンプル]" style="filter: blur(direction=0, strength=30);"></p>
<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: blur(direction=180, strength=10);">
フィルタの表示テスト
</div>
フィルタの表示テスト
<p><img src="example1.gif" alt="[サンプル]" style="filter: blur(add=false, direction=315, strength=20);"></p>
<div style="font: bold 170% sans-serif; width: 100%; filter: blur(add=false, direction=90, strength=15);">
フィルタの表示テスト
</div>
フィルタの表示テスト