1 / 32

Chapter 15

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

lavi
Download Presentation

Chapter 15

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 15 Dynamic HTML: Filters and Transitions

  2. 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

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

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

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

  6. 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

  7. chroma.html(1 of 3)

  8. chroma.html(2 of 3)

  9. 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

  10. mask.html(1 of 2)

  11. 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

  12. <tr> <td>Normal</td> <td>Grayscale</td> </tr> <tr> <td><img src = "hc.jpg" alt = "normal scenic view" /></td> <td><img src = "hc.jpg" style = "filter: gray" alt = "gray scenic view"/> </td> </tr> <tr> <td>Xray</td> <td>Invert</td> </tr> <tr> <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"/> </td> </tr>

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

  14. shadow.html(1 of 2)

  15. shadow.html(2 of 2)

  16. 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)

  17. alpha.html(1 of 3)

  18. alpha.html(2 of 3)

  19. alpha.html(3 of 3)

  20. 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>

  21. 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

  22. 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>

  23. 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

  24. wave.html(1 of 2)

  25. wave.html(2 of 2)

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

  27. blendtrans.html(1 of 2)

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

More Related