Applying Filters and Transition in DHTML

FILTERS & TRANSITION!

Filters and Transition are two features of DHTML that enable the programmer to achieve a great variety of effects, such as:

Transitioning between pages with random dissolves and horizontal and vertical blinds
Converting colored images to gray in response to a user action for disabling purpose
Glowing some letters for emphasis
Displaying text in three-dimensional appearance using drop shadow effect

Among these two features (filters and transitions), applying filters will result in changes that are persistent, but transitions are temporary. Transitions allow a user to transfer from one page to another with a pleasant visual effect such as a random dissolve.

Filters and Transitions are Microsoft Technologies available only in Windows-based versions of IE 5.5, and are not available in any other browsers. They can be applied to block-level elements such as div or p, and to in-line elements such as strong or em if the element has its height or width CSS properties set.

Flip Filters: FlipV and FlipH:

The flipv and fliph filters mirror text or images vertically and horizontally, respectively. Apply these filters to an element by setting its filter property of the style attribute to any one of these two filter (flipv or fliph) or both to get the mirror effect. The coding is as follows:

<h1 style = “filter: fliph”>A Mirrored Text</h1>

<p style = “filter: flipv fliph>Fully Mirred</p>

Transparency with the Chroma Filter:

Chroma filter is a filter which is applied to an image, to make a part of the image transparent to its background. This filter applies transparency effect to a part of the image having the color specified in the filter.

Chroma effect can be applied to an element of a web page using the two properties of the chroma filter: color and enabled. The color property specifies the color of the image for which we apply transparency effect and the property enabled specifies whether to apply the effect to the element or not. This effect can be applied to an image of a web page as follows:

chromaImg.filters(“chroma”).color = blue;

chromaImg.filters(“chroma”) = true;

In this example, if the picture named trans.gif has a portion with a color blue, then that part of the image will be made transparent so that the element at the back of the image will be visible through that image.

Mask Filter:

Mask filter allows an element of a web page to be displayed with a solid background and a transparent foreground. Mask filter has a property called color, which specifies the color of the solid background to the masked image or text. The foreground will have the transparency effect.

Example for the code that applies mask effect to a text displayed on an image using <div> element is as follows:

<body>

<h1> Mask Filters </h1>

<h1 style = “font-family: courier, monospace”>

This is a text displayed with the mask effect </h1>

</div>

<img src = “gradient.gif” width = “400” height = “200”

alt = “Image with Gradient effect”/>

</body>

Adding Shadow to a Text:

Shadow filter adds depth to your text in order to create a shadowing effect that gives a three-dimensional appearance to the text. To apply shadowing effect to some text in a web page, apply the shadow filter to the text with values assigned to its direction and color properties.

The direction property of the shadow filter determines in which direction the shadow effect is applied – this can be set to one of eight directions expressed in angular notation – 0 (up), 45 (above-right), 90 (right), 135 (below-right), 180 (below), 225 (below-right), 270 (left) and 315 (above-right). The color property specifies the color of the shadow of the text.

To get the shadowing effect fully, we need to set another style called padding. Increasing the padding value from 0 to 100 provides greater distance between the text and the border of the element, allowing the full effect to be displayed. The following is an example code for applying shadowing effect to a header element in a web page:

<h1 id = “ShadowText” style = “position: absolute; top: 25; left: 25;

Padding: 10; filter: shadow(direction = 45, color = red)”>

A Heading with Shadow </h1>

Creating Gradients with Alpha filter:

Gradient is an effect that can be applied to an image to make it transparent to its background in three different styles: Linear, Circular and Triangular. Linear gradient applies transparency effect to an image gradually from one end to the other horizontally. Circular gradient gives the transparency effect from the centre of the image as a circle which gradually fades away as it enlarges.

Triangular gradient gives the transparency effect in triangular form. A picture is considered as a rectangle formed using four triangles. Each triangular area has transparency effect which is very less at the top and gradually increases more towards bottom. This kind of effect can be applied with the help of three properties of the alpha filter. They are: Style, Opacity and FinishOpacity.

Alpha filter can be applied to the div element, which acts as a container to an image in a web page. The style property determines in what style the opacity is applied: a value of 0 applies uniform opacity, a value of 1 applies a linear gradient, a value of 2 applies a circular gradient and a value of 3 applies a rectangular gradient.

The Opacity and FinishOpacity properties are both percentages that determine at what percentage the specified gradient starts and finishes, respectively. The following lines of code illustrate the application of this filter to an image placed on a div element of a web page:

<body>

<div id = “pic” style = “position: absolute; left: 0; top: 0;

filter: alpha(style = 2, opacity = 100, finishopacity = 0”>

<img src = “flag.bmp” alt = “flag”/>

</div>

</body>

Creating Motion with Blur:

The blur filter creates an illusion of motion by blurring text or images in a certain direction. It has three properties: add, direction and strength, the values of which specify the attributes of the blurring effect. The add property, when set to tree adds a copy of the original image over the blurred image, creating a more clear blurring effect.

The direction property determines in which direction the blur filter is applied. This is expressed in any one of the eight angular vales (0, 45, 90, 135, 180, 225, 270 and 315). The strength property determines how strong the blurring effect is. The following code implements such effects to a header line placed in a div element (block):

<body>

<div id=“blurText” style=“position: absolute, left: 150, top: 150,

padding: 0; filter: blur(add=1, direction=35, strength=50)

background-color: white”>

<h1> This is a header with Blurred effect </h1>

</div>

</body>

Search This Blog