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>
