filter: wave(***);

Browser
  • IE
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