dcsimg

So, You Want A Wave, Huh?

By Joe Burns

WEBINAR:
On-Demand

Application Security Testing: An Integral Part of DevOps


Use these to jump around or read it all...
[Examples] [Parameters]

The Wave Filter is a great effect that will wave either text or an image, as long as that text or image sits inside of a division or SPAN.

The Wave Filter acts a lot like a Style Sheet command, as do the other static text filters. I just broke this one out from the other text filters because there are so many more settings to play with.


Examples

Let me give you an example of what this filter can do: The code:


<DIV STYLE="width:350;height:70;filter:wave(strength=4, freq=2, lightstrength=40, add=0, phase=20)">
<FONT SIZE=+3>Here's What You Get.</FONT></DIV>


...gives you this:

Here's What You Get.

Now, let's apply the same parameters to an image. The code looks like this:


<DIV STYLE="width:350;height:70;filter:wave(strength=4, freq=2, lightstrength=40, add=0, phase=120)">
<IMG SRC="/images/eggs.gif"></DIV>


...and gives you this:

Make a point of keeping all of the Style Sheet and parameter codes in the <DIV> on the same line. If you don't, you might not get the effect.


Parameters

The real fun of this filter is setting the parameters to differing levels of intensity. Go nuts! Here's what each one means and how you can set it. Just follow the format in the code examples above.

  • add: Do you want the original image added to the mix? Use 0 for no and 1 for yes.
  • enabled : Is the effect turned on or not? Use 0 for no and 1 for yes.
  • freq: How many waves do you want?
  • lightStrength: How much light intensity do you want?
  • phase: Sets the phase where the waving begins. If you try different numbers, you'll set the difference.
  • strength: How strong do you want the filter?

Keep in mind that this effect only works on IE browsers 4.0 or better, but feel free to use the commands regardless. Browsers that do not understand the commands will happily ignore them.

 

Enjoy!

 

[Examples] [Parameters]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date