5/17/13

Applying Filters and Transition in DHTML | Future for You Network!

Twitter Facebook RSS Feed

Search This Blog

Search

Home

Computer Basics

MS Office

Programming Languages

Web Programming

Open Source

Applying Filters and Transition in DHTML

DHT M L DHT M L S CRIP T ING INT E RNE T P ROGRA M M ING 0 COM M E NT S

Verse to Remember!

FILTERS & TRANSITION!

Filters and Transition are two features of DHTML that enable the programmer to achieve a great variety of effects, such as: 1. Transitioning between pages with random dissolves and horizontal and vertical blinds 2. Converting colored images to gray in response to a user action for disabling purpose 3. Glowing some letters for emphasis 4. 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: <img id= chromaImg src= trans.gif style= position: absolute; filter: chroma alt= Transparent Image /> chromaImg.filters(chroma).color = blue;
RECENT POPULAR LABEL

Proverbs 21:31

Reources for Preparing the Subject - COA Previous Year Question Paper on COA Frequently Asked Questions on PHP & Python Previous Year Question Paper on Open Source Software Do you know the Basics of PHP and Python? Developing Applications with Python Learning More on Operators in PHP Using Operators and Expressions in PHP Various Types of Scope of Variables in PHP Fundamentals of PHP Programming

Total Pageviews

31,525

Blog Archive
2013 (29) 2012 (10) 2011 (97) December (11) November (28) Storing and Retrieving Strings in C

www.futureforyou.net/2011/11/applying-filters-and-transition-in.html

1/3

5/17/13
chromaImg.filters(chroma) = true;

Applying Filters and Transition in DHTML | Future for You Network!

Need for Software in Computers Organization of Digital Computer Evolution of Electronic Computers How are Computers classified? Computer and Its Characteristics Physical Layer and Media used in Networks Topologies in Computer Networks Data Flow in a Network ISO/OSI Model of Networking <div style = position: absolute; top:125; left:20; filter: mask (color=red)> <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> Network Standards and Standard Organizations Categories of Computer Network! Introduction to Computer Networks How Great Is Our GOD! - Don Moen Architecture of Servlet! Data Binding with Tabular Data Cotrol (TDC) Applying Filters and Transition in DHTML A Course on Internet Programming Introduction to XML E-Learning on Java Programming Success Story of Sanjay Introduction to Java Programming University Exam on Web Technology - Just Got Over!... Want to become a New Creation? Model Questions for PCD Model Question for C# AND .NET FRAMEWORK Managing Client information with Cookies Session Handling in ASP October (55) September (3)

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>

Adding Shadow to a Text: Shadow filter adds depth to your text in order to create a shadowing effect that gives a threedimensional 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.

About Me
Da vi d Li vi ngston J A software professional turned academician. Is an assistant professor in computer science engineering, teaching egineering students in colleges affiliated to Anna University. Has expertise in client server programming,web programming and enterprise computing. Has been guiding students to real time projects. This is a platform through which he shares his knowledge gained over the years to benefit students who want

www.futureforyou.net/2011/11/applying-filters-and-transition-in.html

2/3

5/17/13

Applying Filters and Transition in DHTML | Future for You Network!

to update and grow.
Vi e w m y co m p l e te p ro fi l e

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) back ground-color: white> <h1> This is a header with Blurred effect </h1> </div> </body>

Leave a Reply
E n t e ry o u rc o m m e n t . . .

Comment as: Google Account Publish Preview

Links to this post

Create a Link Data Binding with Tabular Data Cotrol (TDC) Subscribe to: Post Comments (Atom) A Course on Internet Programming

Future for You Network! 2011 FutureForYou Network. Supported by W3G Team and FutureForYou.in

www.futureforyou.net/2011/11/applying-filters-and-transition-in.html

3/3