Best Front Page and Web Design
Forum

Great Web Graphic program
here
 

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

 

d

 

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