1. Dynamic HTML: Filters and Transitions
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 Transitions
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>
<!-- More than one filter can be applied at once -->
<td style = "filter: flipv fliph">Text</td>
<td style = "filter: flipv">Text</td>
</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)

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

11. mask.html (1 of 2)

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

14. <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"/>

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

16. shadow.html (1 of 2)

17. shadow.html (2 of 2)

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

19. alpha.html (1 of 3)

20. alpha.html (2 of 3)

21. alpha.html (3 of 3)

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

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

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

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

27. wave.html (1 of 2)

28. wave.html (2 of 2)

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

30. blendtrans.html (1 of 2)

32. Resources http://www.fred.net/dhark/demos/css/css_filter_examples.html