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 |
使用例
■フィルタなしの状態
<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>
- サイト内検索
