Download - Chapter 15 Dynamic HTML: Filters and Transitions.

Chapter 15Chapter 15

Dynamic HTML: Dynamic HTML: Filters and TransitionsFilters and Transitions

OutlineOutline

• 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

IntroductionIntroduction

• Better visual effectsBetter visual effects• Require IE 4.0+ Require IE 4.0+ • FiltersFilters

– Cause changes that are persistentCause changes that are persistent

• TransitionsTransitions– TemporaryTemporary– Allow transfer from one page to another Allow transfer from one page to another

with pleasant visual effectwith pleasant visual effectnext: filters

Flip Filters: Flip Filters: flipvflipv and and fliphfliph

• flipvflipv and and fliphfliph filters mirror text or filters mirror text or images vertically and horizontally, images vertically and horizontally, respectivelyrespectively

<table><table> <tr><tr> <td style = "filter: fliph">Text</td><td style = "filter: fliph">Text</td> <td>Text</td><td>Text</td> </tr></tr>

<tr><tr>  <td style = "filter: flipv fliph">Text</td><td style = "filter: flipv fliph">Text</td> <td style = "filter: flipv">Text</td> <td style = "filter: flipv">Text</td> </tr></tr> </table></table>

Transparency with the Transparency with the chromachroma FilterFilter

• chromachroma filter applies transparency filter applies transparency effects dynamicallyeffects dynamically– Without using a graphics editor to hard-Without using a graphics editor to hard-

code transparency into the imagecode transparency into the image– e.g. e.g. <img src= "happy.gif" <img src= "happy.gif"

style="Filter: style="Filter: ChromaChroma(color = (color = yellow)"> yellow)">

• onchangeonchange– Fires when the Fires when the valuevalue of a form changes of a form changes

chroma.htmlchroma.html(1 of 3)(1 of 3)

1 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4

5 

6 

7

8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>

10 <title>Chroma Filter</title>

11

12 <script type = "text/javascript">

13 

27 </script>

28 </head>

29

30 <body>

31

32 <h1>Chroma Filter:</h1>

33

34 <img id = "chromaImg" src = "trans.gif" style =

35 "position: absolute; filter: chroma" alt =

36 "Transparent Image" />

37

38 <form action = "">

39 

40 

41 <select onchange = "changecolor( this.value )">

42 <option value = "">None</option>

43 <option value = "#00FFFF">Cyan</option>

44 <option value = "#FFFF00">Yellow</option>

45 <option value = "#FF00FF">Magenta</option>

46 <option value = "#000000" selected = "selected">

47 Black</option>

48 </select>

49 </form>

50

51 </body>

52 </html>

Creating Image Creating Image masksmasks

• Using the mask filter to create an effect:Using the mask filter to create an effect:– Background is a solid colorBackground is a solid color– Foreground is transparent to the image or color Foreground is transparent to the image or color

behind itbehind it– e.g. e.g. <span style="width: 357; height: 50; <span style="width: 357; height: 50;

Filter: Mask(color=red)">Filter: Mask(color=red)">

"Now, Stop That!."</span> "Now, Stop That!."</span> • Renders the span element with the specified Renders the span element with the specified

background color (red), and transparent foreground background color (red), and transparent foreground color color

mask.htmlmask.html(1 of 2)(1 of 2)




4

5 

6 

7


9 <head>

10 <title>Mask Filter</title>

11 </head>

12

13 <body>

14

15 <h1>Mask Filter</h1>

16

17 

18 

19 

20 <div style = "position: absolute; top: 125; left: 20;

21 filter: mask( color = #CCFFFF )">

22 <h1 style = "font-family: Courier, monospace">

23 AaBbCcDdEeFfGgHhIiJj<br />

24 KkLlMmNnOoPpQqRrSsTt

25 </h1>

26 </div>

27

28 <img src = "gradient.gif" width = "400" height = "200"

29 alt = "Image with Gradient Effect" />

30 </body>

31 </html>

More Image Filters: More Image Filters: invertinvert, , graygray and and xrayxray

• invertinvert filter filter– Negative image effectNegative image effect

• Dark areas become light and light areas become darkDark areas become light and light areas become dark

• graygray filter filter– Grayscale image effectGrayscale image effect

• All color is stripped from the image, only brightness All color is stripped from the image, only brightness data remainsdata remains

• xrayxray filter filter– X-ray effectX-ray effect

• Inversion of the grayscale effectInversion of the grayscale effect

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

Adding Adding shadowsshadows to Text to Text

• shadowshadow filter filter– adds depth to textadds depth to text– Showing effectShowing effect

•Three-dimensional appearanceThree-dimensional appearance

shadow.htmlshadow.html(1 of 2)(1 of 2)


2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5 

6 

7


9 <head>

10 <title>Shadow Filter</title>

11


13 

30 </script>

31 </head>

32

33 <body onload = "start()">

34

35 <h1 id = "shadowText" style = "position: absolute; top: 25;

36 left: 25; padding: 10; filter: shadow( direction = 0,

37 color = red )">Shadow Direction: 0</h1>

38 </body>

39 </html>

Creating Gradients with Creating Gradients with alphaalpha• alphaalpha filter filter

– Gradient effectGradient effect• Gradual progression from starting color to target colorGradual progression from starting color to target color

– Properties:Properties:• opacity, finishopacity, style, startx, starty, finishx, finishy opacity, finishopacity, style, startx, starty, finishx, finishy

– opacity and finishopacityopacity and finishopacity• determine at what percent opacity the gradient starts and determine at what percent opacity the gradient starts and

finishesfinishes– stylestyle

• Uniform opacity (Uniform opacity (valuevalue 0) 0)• Linear gradient (Linear gradient (valuevalue 1) 1)• Circular gradient (Circular gradient (valuevalue 2) 2)• Rectangular gradient (Rectangular gradient (valuevalue 3) 3)

alpha.htmlalpha.html(1 of 3)(1 of 3)




4

5 

6 

7


9 <head>

10 <title>Alpha Filter</title>


12 

21 </script>

22 </head>

23

24 <body>

25


26 <div id = "pic"

27 style = "position: absolute; left:0; top: 0;

28 filter: alpha( style = 2, opacity = 100,

29 finishopacity = 0 )">

30 <img src = "flag.gif" alt = "Flag" />

31 </div>

32

33 <table style = "position: absolute; top: 250; left: 0;

34 background-color: #CCFFCC" border = "1">

35

36 <tr>

37 <td>Opacity (0-100):</td>

38 <td><input type = "text" id = "opacityButton"

39 size = "3" maxlength = "3" value = "100" /></td>

40 </tr>

41

42 <tr>

43 <td>FinishOpacity (0-100):</td>

44 <td><input type = "text" id = "opacityButton2"

45 size = "3" maxlength = "3" value = "0" /></td>

46 </tr>

47

48 <tr>

49 <td>Style:</td>

50 <td><select id = "styleSelect">


51 <option value = "1">Linear</option>

52 <option value = "2" selected = "selected">

53 Circular</option>

54 <option value = "3">Rectangular</option>

55 </select></td>

56 </tr>

57

58 <tr>

59 <td align = "center" colspan = "2">

60 <input type = "button" value = "Apply"

61 onclick = "run()" />

62 </td>

63 </tr>

64 </table>

65

66 </body>

67 </html>

Making Text Making Text glowglow

• glowglow filter adds an aura of color filter adds an aura of color around textaround text

• e.g. e.g. <span style = "<span style = "

filter: glow( color = #FFFF00, strength = 10 filter: glow( color = #FFFF00, strength = 10 )"> )">

Glowing TextGlowing Text

</span></span>

Creating Motion with Creating Motion with blurblur

• blurblur filter creates an illusion of motion by filter creates an illusion of motion by blurring text or images in a certain directionblurring text or images in a certain direction– AddAdd

• Adds a copy of the original image over the blurred Adds a copy of the original image over the blurred imageimage

– DirectionDirection• Determines in which direction the Determines in which direction the blurblur filter is applied filter is applied

– strengthstrength• Determines how strong the blurring effect isDetermines how strong the blurring effect is

Creating Motion with Creating Motion with blurblur

• Examples:Examples:

• <img src="sun.gif" style="filter: <img src="sun.gif" style="filter: blur(add = 0, direction = 225, strength blur(add = 0, direction = 225, strength = 10)"> = 10)">

• <span style="width: 357; height: 50; <span style="width: 357; height: 50; filter: blur(add = 1, direction = 225, filter: blur(add = 1, direction = 225, strength = 10)">"SunShine!"</span> strength = 10)">"SunShine!"</span>

Using the Using the wavewave Filter Filter

• wavewave filter allows user to apply sine-wave filter allows user to apply sine-wave distortions to text and images on Web distortions to text and images on Web pagespages– addadd

• Adds a copy of the text or image underneath the Adds a copy of the text or image underneath the filtered effectfiltered effect

– freqfreq• Determines the frequency of the wave appliedDetermines the frequency of the wave applied

– phasephase• Indicates the phase shift of the waveIndicates the phase shift of the wave

wave.htmlwave.html(1 of 2)(1 of 2)




4

5 

6 

7


9 <head>

10 <title>Wave Filter</title>

11


13 

27 </script>

28 </head>

29

30 <body onload = "start();">

31

32 <span id = "flag"

33 style = "align: center; position: absolute;

34 left: 30; padding: 15;

35 filter: wave(add = 0, freq = 1, phase = 0,

36 strength = 10); font-size: 2em">

37 Here is some waaaavy text

38 </span>

39

40 </body>

41 </html>

blendTransblendTrans Transition Transition

• Example of the Example of the blendTransblendTrans transition transition– Creates a smooth fade-in/fade-out effectCreates a smooth fade-in/fade-out effect

blendtrans.htmlblendtrans.html(1 of 2)(1 of 2)




4

5 

6 

7


9 <head>

10 <title>Using blendTrans</title>

11


13 

21 </script>

22 </head>

23

24 <body>

25

26 <div id = "textInput" onclick = "blendOut()" style =

27 "width: 300; filter: blendTrans( duration = 3 )">

28 <h1>Some fading text</h1>

29 </div>

30

31 </body>

32 </html>

ResourcesResources

• http://www.fred.net/dhark/demos/csshttp://www.fred.net/dhark/demos/css/css_filter_examples.html/css_filter_examples.html

• http://msdn.microsoft.com/workshop/http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXsamples/author/dhtml/DXTidemo/DXTidemo.htmTidemo.htm

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

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

http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm