Filters And Transitions 8g5w

  • ed by: Chidambaram
  • 0
  • 0
  • December 2019
  • PDF

This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report 3i3n4

Overview 26281t

& View Filters And Transitions as PDF for free.

More details 6y5l6z

  • Words: 4,580
  • Pages: 61


 2004 Prentice Hall, Inc. All rights reserved.

fliph  filter applied

Both fliph and flipv filters applied

 2004 Prentice Hall, Inc. All rights reserved.

No filters applied

flipv  filter applied

15.3 Transparency with the chroma Filter • chroma filter applies transparency effects

dynamically – Without using a graphics editor to hard-code transparency into the image

• onchange – Fires when the value of a form changes

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

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

4

 

5



6



7

 

8



9 10

Outline chroma.html (1 of 3)

Chroma Filter 2x6f3c

11   12

<script type = "text/javascript">

13



27



28

Outline



29   30

chroma.html (2 of 3)



31   32

Chroma Filter: 103448



33   34


35

"position: absolute; filter: chroma"

36

"Transparent Image" />

alt =

37   38



39



40



42



43



44



45



46



50  

 2004 Prentice Hall, Inc. All rights reserved.

51



52

Outline chroma.html (3 of 3)

 2004 Prentice Hall, Inc. All rights reserved.

15.4 Creating Image masks • Background is a solid color • Foreground is transparent to the image or color behind it

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

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

4

 

5



7

 

8



9 10 11

Outline mask.html (1 of 2)

-->

Mask Filter e4i3k

12   13



14   15

Mask Filter 5djw



16   17



18



19



20



22

23 AaBbCcDdEeFfGgHhIiJj 24 KkLlMmNnOoPpQqRrSsTt 25 323k4j



 2004 Prentice Hall, Inc. All rights reserved.

26



27   28



29 30

Outline

alt = "Image with Gradient Effect" />

31

mask.html (2 of 2)

 2004 Prentice Hall, Inc. All rights reserved.

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

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

Outline

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

4

 

5



7

 

8



9 10

-->

misc.html (1 of 2)

Misc. Image filters 1v63o

11   12

<style type = "text/css">

13

.cap { font-weight: bold;

14

background-color: #DDDDAA;

15

text-align: center }

16 17



18   19 20 21



































































22 23 24 25  2004 Prentice Hall, Inc. All rights reserved. 26 28 31 32 33 34 35 36 37 40 43 44
NormalGrayscale
<br
27

"normal scenic view" />

29

Outline

alt = "gray scenic view"/>

30

misc.html (2 of 2)

XrayInvert


38

alt = "xray scenic view"/>

39



41

alt = "inverted scenic view"/>

42


45   46



47

 2004 Prentice Hall, Inc. All rights reserved.

 2004 Prentice Hall, Inc. All rights reserved.

15.6 Adding shadows to Text • shadow filter – Showing effect • Three-dimensional appearance

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

Outline

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

4

 

5



7

 

8



9 10

-->

shadow.html (1 of 2)

Shadow Filter 5j4k6y

11   12

<script type = "text/javascript">

13



30



31

Outline shadow.html (2 of 2)



32   33



34   35

Shadow Direction: 0 5723n



38



39

 2004 Prentice Hall, Inc. All rights reserved.

15.7 Creating Gradients with alpha • alpha filter – Gradient effect • Gradual progression from starting color to target color

– style • • • •

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

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

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

4

 

5



7

 

8



9

-->

Outline alpha.html (1 of 3)



10

Alpha Filter 6n5z2l

11

<script type = "text/javascript">

12



21



22



23   24



25  

 2004 Prentice Hall, Inc. All rights reserved.

26 27



30 31

Flag


Outline alpha.html (2 of 3)

32   33 34



















































35 36 37 38 41 42 43 44 47 48 49 50 56 Outline alpha.html (3 of 3) 57 58 59 63 64
Opacity (0-100):

39 40

size = "3" maxlength = "3" value = "100" />
FinishOpacity (0-100):

45 46

size = "3" maxlength = "3" value = "0" />
Style:<select id = "styleSelect">

 2004 Prentice Hall, Inc. All rights reserved.

51



52



54



55



60



61

onclick = "run()" />

62


65   66



67

 2004 Prentice Hall, Inc. All rights reserved.

 2004 Prentice Hall, Inc. All rights reserved.

15.8 Making Text glow • glow filter adds an aura of color around text

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

Outline

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

4

 

5



7

 

8



9

-->



10

Glow Filter 6q3x5i

11

<script type = "text/javascript">

12



54



55

Outline glow.html (3 of 4)



56   57 58

Glow Filter: 75u6e



59   60

<span id = "glowSpan" style = "position: absolute;

61

left: 200;top: 100; padding: 5; filter: glow(

62

color = red, strength = 5 ); font-size: 2em">

63

Glowing Text

64



65   66 67















































68 69 71 72 73 74 77 78 79 Outline 84 85
Color (Hex)

70

maxlength = "6" value = "FF0000" />
Strength (1-255)

75

size = "3" maxlength = "3" value = "5" />

 2004 Prentice Hall, Inc. All rights reserved.

76



80



81

onclick = "apply()" />

82

glow.html (4 of 4)



83

onclick = "startdemo()" />


86   87



88

 2004 Prentice Hall, Inc. All rights reserved.

15.9 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

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

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

4

 

5



6



Outline blur.html (1 of 5)



10

Blur Filter 5w1zb

11

<script type = "text/javascript">

12



 2004 Prentice Hall, Inc. All rights reserved.

51 52



Outline



53   54 55



56   57

































































58 blur.html (3 of 5) 59   60 61 62 73   74 75  2004 Prentice Hall, Inc. All rights reserved. 76 Outline 79   80 81 82 83 blur.html (4 of 5) 84   85 86 90   91 92 98   99
Blur filter controls
Direction:<select name = "Direction">

63



64



65



66



67



68



69



70



71 72
Strength:

77 78

maxlength = "3" value = "0" />
Add original?


87



88 89

onclick = "reBlur();" />


93



94 95

onclick = "startDemo();" />

96 97

onclick = "window.clearInterval( timer );" />


100



 2004 Prentice Hall, Inc. All rights reserved.

101   102



106



107 108

Outline blur.html (5 of 5)

alt = "Shapes" />


109   110



111

 2004 Prentice Hall, Inc. All rights reserved.

15.10 Using the wave Filter • wave filter allows 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

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

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

4

 

5



7

 

8



9 10

-->

Outline wave.html (1 of 2)

Wave Filter 26414i

11   12

<script type = "text/javascript">

13



27



28



Outline

29   30



31   32

wave.html (2 of 2)

<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



39   40



41

 2004 Prentice Hall, Inc. All rights reserved.

 2004 Prentice Hall, Inc. All rights reserved.

15.11 Advanced Filters: dropShadow and light • dropShadow – Creates a blacked-out version of the image, and places it behind the image – offx and offy properties • Determined by how many pixels the drop shadow is offset – color property • Specifies the color of the drop shadow

• light filters – Most powerful and advanced filter in Internet Explorer 6.0 – Allows simulation of a light source shining on Web page – All parameters and methods are set by scripting – addPoint • Adds a point light source  2004 Prentice Hall, Inc. All rights reserved.

1



2


3

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

4

 

5



6



7

 

8



9 10

Outline dropshadow.html (1 of 3)

DHTML dropShadow and light Filters 4y33c

11   12

<script type = "text/javascript">

13



39



40



41   42



43   44



45

style = "top: 100; left: 100; filter: dropShadow(

46

offx = 0, offy = 0, color = black ) light()"

47

onmousemove = "run()" alt = "Circle Image" />

48  

 2004 Prentice Hall, Inc. All rights reserved.

49



50

Outline dropshadow.html (3 of 3)

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

Outline

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

4

 

5



7

 

8



9

-->

conelight.html (1 of 3)

Cone lighting 1pr4i

10   11

<script type = "text/javascript">

12

var upDown = true;

13

var counter = 0;

14

var moveRate = -2;

15   16

function setLight()

17

{

18 19 20 21 22 23

marquee.filters( "light" ).addCone( 0, marquee.height, 8, marquee.width / 2, 30, 255, 150, 255, 50, 15 ); marquee.filters( "light" ).addCone( marquee.width, marquee.height, 8, 200, 30, 150, 255, 255, 50, 15 ); marquee.filters( "light" ).addCone( marquee.width / 2, marquee.height, 4, 200, 100, 255, 255, 150, 50, 50 );

24   25

window.setInterval( "display()", 100 );

 2004 Prentice Hall, Inc. All rights reserved.

26

}

27 28

function display()

29

{

30

counter++;

31   32

Outline conelight.html (2 of 3)

if ( ( counter % 30 ) == 0 )

33

upDown = !upDown;

34 35

if ( ( counter % 10 ) == 0 )

36

moveRate *= -1;

37 38

if ( upDown ) {

39

marquee.filters( "light" ).moveLight(

40

0, -1, -1, 3, 0 );

41

marquee.filters( "light" ).moveLight(

42

1, 1, -1, 3, 0 );

43

marquee.filters( "light" ).moveLight(

44

2, moveRate, 0, 3, 0);

45

}

46

else {

47 48 49 50

marquee.filters( "light" ).moveLight( 0, 1, 1, 3, 0 ); marquee.filters( "light" ).moveLight( 1, -1, 1, 3, 0 );

 2004 Prentice Hall, Inc. All rights reserved.

51

marquee.filters( "light" ).moveLight(

52

2, moveRate, 0, 3, 0) ;

53 54

} }

55



56



57



58

Outline conelight.html (3 of 3)

onload = "setLight()">

59   60



61

style = "filter: light; position: absolute; left: 25;

62

top: 25" alt = "Deitel movie marquee" />

63   64



65

 2004 Prentice Hall, Inc. All rights reserved.

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

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

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

4

 

5



6



Outline blendtrans.html (1 of 2)

Using blendTrans 1c1l1b

11   12

<script type = "text/javascript">

13



21



22



 2004 Prentice Hall, Inc. All rights reserved.

23   24



25   26


27

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

28

Some fading text 295h39



29

Outline blendtrans.html (2 of 2)



30   31



32

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

Outline

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

4

 

5



6



blendtrans2.html (1 of 3)

Blend Transition II 3060l

11   12

<script type = "text/javascript">

13



45



46



47   48 49



50  

 2004 Prentice Hall, Inc. All rights reserved.

51

Blend Transition Demo 4d346u



Outline

52   53



54

onfilterchange = "reBlend( false )"

55

style = "position: absolute; left: 50; top: 50;

56

width: 300; filter: blendTrans( duration = 4 );

57

z-index: 1" alt = "First Transition Image"

blendtrans2.html (3 of 3)

/>

58   59



60

onfilterchange = "reBlend( true )"

61

style = "position: absolute; left: 50; top: 50;

62

width: 300; filter: blendTrans( duration = 4 );

63

z-index: 2" alt = "Second Transition Image"

/>

64   65



66

 2004 Prentice Hall, Inc. All rights reserved.

 2004 Prentice Hall, Inc. All rights reserved.

15.13 revealTrans Transition • revealTrans filter – Create professional-style transitions – From box out to random dissolve

 2004 Prentice Hall, Inc. All rights reserved.

1



2


3

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

4

 

5



7

 

8



9 10

-->

Outline revealtrans.html (1 of 4)

24 DHTML Transitions 3e4z4h

11   12

<script type = "text/javascript">

13



68



69



70   71 72



73  

 2004 Prentice Hall, Inc. All rights reserved.

74



75

style = "position: absolute; left: 10; top: 10;

76

width: 300; z-index:1; visibility: visible;

77

filter: revealTrans( duration = 2, transition = 0 )"

78

onfilterchange = "reBlend( false )" alt =

79

"Programming Tips" />

Outline revealtrans.html (4 of 4)

80   81



82

style = "position: absolute; left: 10; top: 10;

83

width: 300; z-index:1; visibility: visible;

84

filter: revealTrans( duration = 2, transition = 0 )"

85

onfilterchange = "reBlend( true )" alt = "Icons" />

86   87

Transition 0: Box In


89   90



91

 2004 Prentice Hall, Inc. All rights reserved.

 2004 Prentice Hall, Inc. All rights reserved.

Related Documents 3h463d

Filters And Transitions 8g5w
December 2019 73
2.3 Dynamic Html Filters And Transitions Ch_15 604w5v
December 2019 61
Essay Writing Transitions And Connectives 6r1bm
October 2019 136
04 Filters And Regulators 2ti1g
December 2019 66
3 Transitions And Commentary Starters 6k5u4w
October 2019 146
Dsp And Filters 2x281e
April 2022 0

More Documents from "Chidambaram" 4m61g

Ooad Complete Notes 3r542m
October 2019 78
Object Model And Collections 1v231n
December 2019 46
Filters And Transitions 8g5w
December 2019 73
Data Binding With Tabular Data Control 2f6z6s
February 2022 0
Event Model 2w5o2r
December 2019 45
Event Classes In Java 664l2t
October 2019 66

Copyright © 2025 IDOUB.