filter: wave(***);

ブラウザ
  • IE
プロパティ
  • 独自拡張プロパティ
IE10以降は未対応となりました。

wave は、波状にするフィルタです。

波の数、大きさ、立体感などを指定することができます。


.example {
filter: wave(add=false, freq=3, strength=5, lightstrength=30, phase=50);
}
属性 値と説明
add 波の上に元の内容を重ねるかどうか
0 （または false） = 重ねない｜1 （または true） = 重ねる
freq 波の数 （数値）
strength 波の強さ （数値）
lightstrength 光の強さ
0 （弱） ～ 100 （強）
phase 波の開始位置
0 ～ 100
  • このプロパティは、CSS 2では定義されていません。

使用例

フィルタなしの状態
<p><img src="example1.gif" alt="［サンプル］"></p>

［サンプル］

<div style="font: bold 170% sans-serif; width: 100%;">
フィルタの表示テスト
</div>
フィルタの表示テスト
波の数
<div style="width: 100%; filter: wave(strength=5, lightstrength=50);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］ 
<div style="width: 100%; filter: wave(freq=1, strength=5, lightstrength=50);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］ 
<div style="width: 100%; filter: wave(freq=10, strength=5, lightstrength=50);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］ 
<div style="font: bold 170% sans-serif; color: red; width: 10em; padding-left: 10px; filter: wave(strength=3, lightstrength=50);">
フィルタの表示テスト
</div>
フィルタの表示テスト 
<div style="font: bold 170% sans-serif; color: red; width: 10em; padding-left: 10px; filter: wave(freq=1, strength=3, lightstrength=50);">
フィルタの表示テスト
</div>
フィルタの表示テスト 
<div style="font: bold 170% sans-serif; color: red; width: 10em; padding-left: 10px; filter: wave(freq=6, strength=3, lightstrength=50);">
フィルタの表示テスト
</div>
フィルタの表示テスト
波の強さ
<div style="width: 100%; filter: wave(strength=3, lightstrength=50);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］ 
<div style="width: 100%; filter: wave(strength=30, lightstrength=50);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 30px;">
</div>
［サンプル］
光の強さ
<div style="width: 100%; filter: wave(strength=5);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］ 
<div style="width: 100%; filter: wave(strength=5, lightstrength=60);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］ 
<div style="width: 100%; filter: wave(strength=5, lightstrength=30);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］
波の開始位置
<div style="width: 100%; filter: wave(strength=5, lightstrength=50, phase=25);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］ 
<div style="width: 100%; filter: wave(strength=5, lightstrength=50, phase=75);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］
元の内容を重ねる
<div style="width: 100%; filter: wave(add=true, strength=10, lightstrength=50);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 10px;">
</div>
［サンプル］