Chapter 15 DHTML: Filters and Transitions CIS 275—Web Application Development for Business I

2 Introduction Some DHTML visual effects page transitions (random dissolves, vertical blinds) convert colored images to gray to denote selection make letters ______ for emphasis drop shadows for 3D effects ______ text for an illusion of motion Filters are specified with the CSS _______ property—changes are persistent. Transitions are temporary changes. The effects of filters and transitions are programmable (can be made to respond to ______). Filters and transitions are built into ___.

3 Flip Filters and Transparency Flip horizontal using the fliph value of the _______ property Some text Flip vertical using the fliph value of the filter property Some text See p. 478 for an example of flipping. Enable an image for applying ____________ to a specified color See p. 480 for a good example of applying transparency.

4 The mask Filters Applying the mask filter makes an element’s background a solid color and its foreground ___________. Another element can then show through the element’s transparent foreground. Example This text is transparent This text is transparent and the text’s background is red See p. 482 for a more complex example.

5 Other Image Filters The invert filter applies a _________ image effect. The gray filter applies a __________ image effect. The xray filter applies an inversion of the __________ effect. See p. 483 for an example.

6 Gradients With alpha The alpha filter creates sophisticated transparency effects. The picture <div id = "pic" style = "filter: alpha(style = 2, opacity = 100, finishopacity = 0)"> The new filter applied with onclick = “change()” function change() { pic.filters( "alpha" ).opacity = 0; pic.filters( "alpha" ).finishopacity = 100; pic.filters( "alpha" ).style = 1; // linear gradient }

7 glow and blur Filters Making text glow (see p. 488) <span id = "glowSpan" style = "filter: glow( color = red, strength = 5 )> Glowing Text Creating motion with blur (see p. 491) <div id = "blurImage" style = "filter: blur( add = 0, direction = 0, strength = 0 ); background-color: white;"> <img align = "middle" src = "shapes.gif" alt = "Shapes" />

8 Other Filters The wave (see p. 494) <span id = "flag" style = "filter: wave(add = 0, freq = 1, phase = 0, strength = 10); font-size: 2em"> Here is some waaaavy text dropShadow (see p. 495) <img id = "imageid" src = "circle.gif" style = "filter: dropShadow(offx = 0, offy = 0, color = black) alt = "Circle Image" /> light (see p. 495) imageid.filters(“light”).addPoint(x, y, height, red, green, blue, strength);

9 blendTrans blendTrans causes a simple dissolve (p. 500) HTML <div id = "textInput" onclick = "blendOut()" style = "width: 300; filter: blendTrans( duration = 3 )"> Some fading text JavaScript function blendOut() { textInput.filters( "blendTrans" ).apply(); // initialize textInput.style.visibility = "hidden"; // set end state textInput.filters( "blendTrans" ).play(); // begin } A more interesting transition (p. 501)

10 revealTrans revealTrans causes one of 24 different transitions HTML <div id = "textInput" onclick = "blend()" style = "width: 300; filter: revealTrans( duration = 3, transition = 24 )"> Transition 24: Random JavaScript function blend() { textInput.filters( “revealTrans" ).apply(); // initialize textInput.style.visibility = "hidden"; // set end state textInput.filters( “revealTrans" ).play(); // begin } A more interesting transition (p. 504)