Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Twelve Dynamic HTML Lessons : Page 10

From Cascading Style Sheets to higlighted text to toggling images on and off the page, here are twelve fancy things that you can learn to do today in DHMTL.


advertisement
Coffee Filters
One of the marvelous features that Internet Explorer 4.0 (or higher) offers is something that called Multimedia Filters. While we're not sure what qualifies these filters as multimedia, we do know that they give us the ability to manipulate our Web page as though we were applying Photoshop-like filters for blurring, opacity, etc.

Let's take a look at one now. Notice how the word coffee appears blurred? We'll bet you even noticed how both "coffees" look different. The top word is HTML text, the bottom word is an image created in Photoshop. We've used both types so that you can see how these filters act differently depending upon whether they are acting upon text or images, see below:


coffee



This is done with the simple application of the filter parameter to the CSS attributes of that division:

<div class=coffee style="width: 100; filter: blur(add=1, direction=45, strength=3)"> coffee<p> <img src="images/coffee.gif" width=100 height=50></div>

It's pretty simple when you know the attributes for the filter. In the case of blur we have add, direction, and strength.

Add is whether or not the original is included in the final filter effect. A value of 0 means don't include the original and a value of 1 means that the original should be overlayed in the final effect.
Here's what it looks like if we set Add to 0:


coffee

As you can see, this example makes it pretty obvious that the blur filter works best on images. The direction attribute should be a number between 0 and 360 indicating the direction of the blur. Strength is how strong the blur should be. Look at the example below, with direction set to 120 and strength set to 10:


coffee

Very Important: One thing that is extremely important to note is that you must specify a width for something that you want to apply a filter to. We're not sure why this CSS attribute is required, but we do know that without specifying width, none of these filters will have any affect.



Let's take a look at some of the other filters now. Here's a fun one called glow:

 coffee

 

<div class=coffee style="width: 200; filter: glow(color=ffff00, strength=5)">coffee<p> <img src="images/coffee.gif" width=100 height=50></div>

Color is the hexadecimal value for the color you wish the glow to be and strength is used to indicate how strong the glow should be.



Similar to glow is the dropshadow filter:

coffee

<div class=coffee style="width: 200; filter: dropshadow(color=000000, offx=3, offy=3, positive=1)">coffee<br> <img src="images/coffee.gif" width=100 height=50></div>

Just as glow did, dropshadow uses the color attribute. It also uses offx and offy which specify the number of pixels to offset the shadow. Finally, it uses positive with a value of either 1 or 0. A value of 1 means to shadow the visible (or positive) pixels and a value of 0 selects the invisible (or negative) pixels.



The invert filter has no attributes but simply produces a negative color effect onto the section it is applied to:

coffee

<div class=coffee style="width: 200; filter: invert">coffee<p> <img src="images/coffee.gif" width=100 height=50></div>



Xray is an odd filter. It is very much like invert, but it first turns the area to grayscale and then inverts it. Like invert it has no parameters. It looks like this when applied:

coffee

<div class=coffee style="width: 200; filter: xray">coffee<p> <img src="images/coffee.gif" width=100 height=50></div>



And, since we've just seen something that has been turned to grayscale we should mention that there is indeed a grayscale filter. Once more, it is a filter with no attributes:

coffee

<div class=coffee style="width: 200; filter: gray">coffee<p> <img src="images/coffee.gif" width=100 height=50></div>



There are attributeless filters for flipping content. They are fliph and flibv for horizontal and vertical flipping respectively.

fliph:


coffee

<div class=coffee style="width: 200; filter: fliph">coffee<p> <img src="images/coffee.gif" width=100 height=50></div>

flipv:

coffee

<div class=coffee style="width: 200; filter: flipv">coffee<p> <img src="images/coffee.gif" width=100 height=50></div>

Those are the most basic filters and, as you can see, they hold a lot of potential.


Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

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