Best Front Page and Web Design

Great Web Graphic program

The Wave Filter
Distorts the content giving a 'wave' effect



back  -  home  -  Filters scripts

Javascript html dhtml graphic progs. web tools

Transitions and Filters

Quite dramatic effects can be achieved by using filters and transitions. 

 They can be applied to images, text, tables, page background etc.
The following demonstrates the
WAVE filter




example 1 - example 2

Without effect

cell image background cell image background        

With wave effect applied


Without effect


With wave effect applied


effect applied to an image



Transitions and Filters
The Wave Filter

The filter must be applied to an element that has width or height measurements. For example an image, table, table cell, div, span etc. You cannot, for example apply it to the <p>, H3, <b>. Because an exact measurement is required one can enclose the tag within a <div> or <span> and define the width or height, or both. For example to apply the wave filter to a line of text you could do this:

Stand alone text example:

<div style="width: 100%; filter: wave(add=false, lightstrength=50, phase=10, strength=3, freq=3,);" <font face="Arial black" size="6" color="blue"><b>This is blue text with wave effect applied</b></font></div>

Applied to an image

(make sure you change the image path and width and height and alt. text)

<img style="Filter: wave(add=false, lightstrength=50, phase=20, strength=10, freq=8,);" src="image.jpg" align="center" width="75" height="100" alt="effect applied to an image">

Altering the filter

Just play around with the numbers and see what has changed. The freq gives you the number of waves. You can change add=false to add=true for a different effect.


back  -  home  -  Filters scripts

Discount Templates Discount Domains Domain Reseller  Template-Layouts 
Sponsor a child    Living Kidney Donation