Dynamic HTML: Filters and Transitions Chapter 15 Dynamic HTML: Filters and Transitions

Outline Introduction Flip Filters: flipv and fliph Transparency with the chroma Filter Creating Image masks Miscellaneous Image Filters: invert, gray and xray Adding shadows to Text Creating Gradients with alpha Making Text glow Creating Motion with blur Using the wave Filter blendTrans Transition

Introduction Better visual effects Require IE 4.0+ Filters Transitions Cause changes that are persistent Transitions Temporary Allow transfer from one page to another with pleasant visual effect next: filters

Flip Filters: flipv and fliph flipv and fliph filters mirror text or images vertically and horizontally, respectively

<table> <tr> <td style = "filter: fliph">Text</td> <td>Text</td> </tr> <!-- More than one filter can be applied at once --> <td style = "filter: flipv fliph">Text</td> <td style = "filter: flipv">Text</td> </table>

Transparency with the chroma Filter chroma filter applies transparency effects dynamically Without using a graphics editor to hard-code transparency into the image e.g. <img src= "happy.gif" style="Filter: Chroma(color = yellow)"> onchange Fires when the value of a form changes

chroma.html (1 of 3)

chroma.html (2 of 3)

Creating Image masks Using the mask filter to create an effect: Background is a solid color Foreground is transparent to the image or color behind it e.g. <span style="width: 357; height: 50; Filter: Mask(color=red)"> "Now, Stop That!."</span> Renders the span element with the specified background color (red), and transparent foreground color

mask.html (1 of 2)

More Image Filters: invert, gray and xray invert filter Negative image effect Dark areas become light and light areas become dark gray filter Grayscale image effect All color is stripped from the image, only brightness data remains xray filter X-ray effect Inversion of the grayscale effect

<tr> <td>Normal</td> <td>Grayscale</td> </tr> <td><img src = "hc.jpg" alt = "normal scenic view" /></td> <td><img src = "hc.jpg" style = "filter: gray" alt = "gray scenic view"/> </td> <td>Xray</td> <td>Invert</td> <td><img src = "hc.jpg" style = "filter: xray" alt = "xray scenic view"/> </td> <td><img src = "hc.jpg" style = "filter: invert" alt = "inverted scenic view"/>

Adding shadows to Text shadow filter adds depth to text Showing effect Three-dimensional appearance

shadow.html (1 of 2)

shadow.html (2 of 2)

Creating Gradients with alpha alpha filter Gradient effect Gradual progression from starting color to target color Properties: opacity, finishopacity, style, startx, starty, finishx, finishy  opacity and finishopacity determine at what percent opacity the gradient starts and finishes style Uniform opacity (value 0) Linear gradient (value 1) Circular gradient (value 2) Rectangular gradient (value 3)

alpha.html (1 of 3)

alpha.html (2 of 3)

alpha.html (3 of 3)

Making Text glow glow filter adds an aura of color around text e.g. <span style = " filter: glow( color = #FFFF00, strength = 10 )"> Glowing Text </span>

Creating Motion with blur blur filter creates an illusion of motion by blurring text or images in a certain direction Add Adds a copy of the original image over the blurred image Direction Determines in which direction the blur filter is applied strength Determines how strong the blurring effect is

Creating Motion with blur Examples: <img src="sun.gif" style="filter: blur(add = 0, direction = 225, strength = 10)"> <span style="width: 357; height: 50; filter: blur(add = 1, direction = 225, strength = 10)">"SunShine!"</span>

Using the wave Filter wave filter allows user to apply sine-wave distortions to text and images on Web pages add Adds a copy of the text or image underneath the filtered effect freq Determines the frequency of the wave applied phase Indicates the phase shift of the wave

wave.html (1 of 2)

wave.html (2 of 2)

blendTrans Transition Example of the blendTrans transition Creates a smooth fade-in/fade-out effect

blendtrans.html (1 of 2)

Resources http://www.fred.net/dhark/demos/css/css_filter_examples.html http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm