filter: wave(***);
| ブラウザ |
|
|---|---|
| プロパティ |
|
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>