Yout

DHTML(cont)
With
DHTML,many visual effects

are implemented directly in the
client-side browser, so no serverside processing delays ae
incurred. DHTML code that
initiates these effects is generally
quite small & is coded directly
into HTML web page.
FILTERS & TRANSITIONS

Filters
are used to apply visual effects

to HTML elements.
Transitions are used to apply a
pleasant visual effects such as random
dissolve while transforming or moving
from one objecct to another.
Filters & Transition dont add content to
your pages rather they present existing
content in an engaging manner to help
hold the users attention.
Filters
& Transitions are so easy

to use that virtually any web
page designer or programmer
can incorporate these effects
with minimal effort.
Filters & Transitions are a
Microsoft Technology available
only in Windows-based versions
of IE5.
FILTERS:
Filters
can be applied to HTML

elements through the CSS filter
property.
Syntax:
For inline style:
<element_name style=filter:filtername
(parameter)>
For embedded & linked style sheet:
Selector{filter:filtername{parameters}}
Types of Filters:
Flip
Filter
Mask filter
Miscellaneous image
filter(invert,gray & xray)
Shadow filter
Alpha filter
Glow filter
Blur Filter
Wave Filter
Chroma Filter
Flip Filter:
It
is used to mirror the text or images

either vertically or horizontally.
Vertical effects is given using flipv( ) &
Horizontal effects is given by fliph( ).
Syntax for giving single filter:
<element-name
style=filter:fliph>text</elementname>
Syntax for giving multiple filter:
<element-name style=filter:fliph
flipv>text</element-name>
Example of Flip
Filter:
<html>
<head>
<title>The Flip Filter</title>
<style type="text/css">
body
{
background-color: #CCFFCC}
table {font-size: 3em;font-family:arial,sans-serif;
background-color:#FFCCCC;border-style:ridge;
border-collapse:collapse
}
td
{
border-style:groove;
}
</style>
</head>
<body>
<table>
<tr>
<td style="filter:fliph">Text</td>
<td>Text</td>
</tr>
<tr>
<td style="filter:flipv fliph">Text</td>
<td style="filter:flipv">Text</td>
</tr>
</table>
<body>
</html>
OUTPUT:
MASK FILTER:
In
case of text, specified color is

set as background & foreground
of text is transparent to the color
behind it.
For images, mask filter marked
the image & color given as a
parameter in mask filter is
displayed in background.
Syntax :
filter:mask(color=value)
Filters applied on an
Image(invert,gray & xray):
Invert
filter applies a negative image

effect i.e dark area become light & light
area become dark.
Gray Filter applies a grayscale image
effect, in which all color is stripped from
image & all that remains is brightness
data.
Xray filter applies an xray effect which is
basically just an inversion of the
grayscale effect.
Syntax:
<IMG src=pic.jpeg"
style="filter:gray( )">
<IMG src=pic.jpg"
style="filter:invert( )">
<IMG src=pic.jpg"
style="filter:xray( )">
Important Keypoint for Filters &

transitions:
NOTE: Filters & Transitions can be
applied to Block-level elements
such as div or p & can only be
applied to inline-elements such
as strong or em if the element
has its height or width CSS
Property set.
Shadow filter:
Use
to apply the shadow effect to the

text or images.
It has two properties: color & direction
Syntax:
filter:shadow(color=color-value,
direction=direction-value)
where,
color corresponds to the specific color in
terms of RGB or name of color & direction
determine the direction of shadow.
Direction
is expressed in terms of
degree & it can be set to any of
eight directions 0(up),45(aboveright),90(right),
135(belowright),180(below),225(belowleft,315(above-left).
E.g:
<h1
style=width:400px;position:abso
lute;left:50px;top:50px;filter:shad
ow(direction=45,color=red)>
CHROMA Filter:
The
chroma filter is used to apply

transparency effect based on
specified color given as a
parameter.
<ELEMENT STYLE = "filter:
chroma(Properties)" ... >
where color. Set/gets the color to
be made transparent.
E.g:filter:chroma(color=value)
Alpha Filter:
Use
to create gradient effect

means gradual progression from
a starting color to a target color.
It is also often used for
transparency effect not
achievable by chroma filter.
Syntax:
Filter:alpha(opacity=opacityvalue,finishopacity(optional)=val
ue,style( optional)=style-value)
Parameters:
Opacity: determine the level of opacity
0=full transparent(invisible)
100=fully opaque(visible)
Finishopacity=value range from 0 to 100 & determine
at what value the gradient effect will finish.
Style=specifies the shape characteristic of the opacity
gradient.possible values are:
0=uniform
1=linear
2=radial/circular gradient
3=rectangular
Note: alpha filter has additional attributes like
startx,starty,finishx,finishy that specify at what x& y
coordinates the gradient start |& finishes in that
element.
e.g:
<div
style=width:400px;height:500px
;filter:
alpha(opacity=100,finishopacity
=0,style=2)>
<img src=1.jpg>
</div>
Glow Filter:
It
allows you to add an aura of

color around your text.
It is used to add radiance around
the outside edge of the object,
giving it the apperance of a glow.
Syntax:
Filter:glow(color=colorname,streng
th= value)
Parameters:
Color:determine
the color for the glow
object
Strength(optional):determine the
intensity of the glow means the no. pf
pixel the glow will extend.
Range is 1 to 255.Default is 5
e.g:<h1
style=width:200px;position:absolute;to
p:100px;left:50px;filter:glow(color=gree
n,strength=20)>Example of glow
filter</h1>
Blur filter
It
creates an illusion of motion by

blurring text or images in a
certain direction.
It has three properties (all are
optional)
add, direction & strength
Syntax:
Filter:blur(add=0/1,direction=value
in degree,strength=integervalue)
Parameters:
add=contain boolean value.If

true(non-zero)then adds a copy
of the original image over the
blurred image.Alwaus use 1 to
see the effect properly.
direction:determine the direction
of the motion of the blur effect.
(same as shadow filter)
Strength:determines how strong
the blurring effect will be.
Wave Filter:
Creates
a wavw like distortion of the

object along its vertical axis.
It allows you to apply sine-wave
distortions to text or images on your web
pages.
It has 4 attributes:
add,frequency,phase & strength
Syntax:
filter:wave(add=0/1,freq=freqvalue,phase=phasevalue,strength=streng
th-value)
Parameters:
add= if its 1,adds the copy of the original

image underneath if the waved image.
Always use 0 to see the effect properly.
Freq=determine number of complete sine
wave effect properly to appear in the
visual distortion.
Phase=determine the phase shift of the
wave which is generally 0 degree but it
range from 0 to 100 .
Strength: determine the intensity of the
wave effect i.e amplitude of the sine
wave.
Eg:
<div
style=width:100px;filter:wave(a
dd=0,freq=1,phase=0,strength=
10)>
<h1>Example of Wave Filter</h1>
</dIV>

Yout

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Yout

Uploaded by

Copyright:

Available Formats

DHTML(cont)

DHTML,many visual effects

FILTERS & TRANSITIONS

are used to apply visual effects

& Transitions are so easy

can be applied to HTML

is used to mirror the text or images

case of text, specified color is

filter applies a negative image

Important Keypoint for Filters &

to apply the shadow effect to the

chroma filter is used to apply

to create gradient effect

allows you to add an aura of

the color for the glow

creates an illusion of motion by

add=contain boolean value.If

a wavw like distortion of the

add= if its 1,adds the copy of the original

You might also like