【MotionBlur()】ブレさせて表示する

filterプロパティのMotionBlur()では、文字や画像をブレさせて表示する事ができます。 ブレの方向や角度、強さなどは各パラメータで指定します。

なおfilter:blur()の書式で指定する場合は、paddingを併せて指定し、ブレ部分のスペースを空けておく必要があります。 書式の違いなどについて詳しくはfilterを参照して下さい。

このプロパティは、Internet Explorer10以降では未対応となっています。

書式

  • filter:progid:DXImageTransform.Microsoft.MotionBlur(★) ……… ブレさせる(IE5.5以上)
  • filter:blur(★) ……… ブレさせる(IE4以上)

★:Direction=ブレの方向、他下記参照

Direction=ブレの方向
ブレの方向を45度単位の角度で指定します。0~360、または下記キーワードで指定して下さい。(初期値Left)
Top「0」、Top Right「45」、Right「90」、Bottom Right「135」、Bottom「180」、Bottom Left「225」、Left「270」、Top Left「315」、Top「360」
Strength=ブレの強さ
ブレの幅(強さ)を数値で指定します。(初期値5)
Add=上書き
ブレさせた上に元の内容を上書きするかどうかを指定します。上書き表示する場合「trueまたは1」、上書き表示しない場合は「falseまたは0」を指定
enabled
フィルタを実行するか指定します。有効にする場合「1」または「true」、無効にする場合は「0」または「false」を指定。

使用した時の例

.sample1 img {
  filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=15, Direction=180);
}
.sample2 img {
  filter:blur(Strength=15, Direction=180);
  padding:10px;
}
<p>フィルタを適用していない画像<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample1">sample1を適用した画像。MotionBlur(Strength=15, Direction=180)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample2">sample2を適用した画像。blur(Strength=15, Direction=180)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>

ブラウザ上の表示例

フィルタを適用していない画像

sample1を適用した画像。MotionBlur(Strength=15, Direction=180)

sample2を適用した画像。blur(Strength=15, Direction=180)

対応ブラウザなどのデータ

プロパティ 独自拡張
対応ブラウザ Internet Explorer4~
※IE10以降は未対応

関連情報