wave filter

filter: wave(***);

Browser
Internet Explorer
Type
Extension

The wave filter add the wave effect to the element.

#example {
filter: wave(add=false, freq=3, strength=5, lightstrength=30, phase=50);
}

Attribute Value Explanation
add 0 (false) or 1 (true) 0 (false) = not add the original content to the waved content
1 (true) = adds the original content to the waved content
freq number the number of the waves
strength number the strength of the wave
lightstrength 0 - 100 the strength of light in the wave
0 = weakest
100 = strongest
phase 0 - 100 the starting position of the wave

Example

The original

<img src="image/friend.gif" alt="IMG" width="170" height="140">
Output

IMG

<div style="font: bold 170% sans-serif; width: 100%;">
Example text
</div>
Output
Example text

The number of the waves

<div style="width: 90%; padding-left: 10px; filter: wave(strength=5, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 
<div style="width: 90%; padding-left: 10px; filter: wave(freq=1, strength=5, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 
<div style="width: 90%; padding-left: 10px; filter: wave(freq=10, strength=5, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 
<div style="font: bold 170% sans-serif; color: red; width: 90%; padding-left: 10px; filter: wave(strength=3, lightstrength=50);">
Example text
</div>
Output
Example text 
<div style="font: bold 170% sans-serif; color: red; width: 90%; padding-left: 10px; filter: wave(freq=1, strength=3, lightstrength=50);">
Example text
</div>
Output
Example text 
<div style="font: bold 170% sans-serif; color: red; width: 90%; padding-left: 10px; filter: wave(freq=6, strength=3, lightstrength=50);">
Example text
</div>
Output
Example text

The strength of the wave

<div style="width: 90%; padding-left: 10px; filter: wave(strength=3, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 
<div style="width: 90%; padding-left: 30px; filter: wave(strength=30, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG

The strength of light in the wave

<div style="width: 90%; padding-left: 10px; filter: wave(strength=5);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 
<div style="width: 90%; padding-left: 10px; filter: wave(strength=5, lightstrength=60);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 
<div style="width: 90%; padding-left: 10px; filter: wave(strength=5, lightstrength=30);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG

The starting position of the wave

<div style="width: 90%; padding-left: 10px; filter: wave(strength=5, lightstrength=50, phase=25);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 
<div style="width: 90%; padding-left: 10px; filter: wave(strength=5, lightstrength=50, phase=75);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG

Adds the original content to the waved content

<div style="width: 90%; padding-left: 10px; filter: wave(add=true, strength=10, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG