HTML and CSS Reference
In-Depth Information
Compatibility
CSS3
Safari 3+
Notes
• WebKit-based browsers support this property as
-webkit-columns
.
• Safari documentation currently reverses the values from the CSS3 specification, but
in either case it does not consistently support width values regardless of the
position of values.
filter
This Microsoft-proprietary property is used to apply visual effects to associated elements.
Syntax
filter:
filtername
(
filtervalues
) ...
filtername
(
filtervalues
)
where
filternames
is one of the numerous filters shown in Table 6-8 or transitions shown in
Table 6-9. It is possible to have multiple filters. They need to be separated by a space. The
filters are processed in order. Always place transitions last.
Transitions are different from filters in that they toggle between two display blocks and
the transition needs to be activated. This is done through JavaScript by calling the
Apply()
function on the filter, updating the object's
visibility
, and then calling
play()
on the
filter. In this example,
transition
is the
id
of a
div
with
image1
and
image2
as children:
transition.filters[0].Apply();
image1.style.visibility = "hidden";
image2.style.visibility = "visible";
transition.filters[0].play();
Note that all transitions have the attributes
duration
, which is a number in seconds, and
enabled
, which is
true
or
false
.
Filter Type
Example
Alpha
filter: progid:DXImageTransform.Microsoft.Alpha(style=2,
opacity=0,finishOpacity=100);
AlphaImageLoader
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=tiger.jpg, sizingmethod=scale);
/* sizingmethod : crop | image | scale */
BasicImage
filter: progid:DXImageTransform.Microsoft.BasicImage(grays
cale=0,xray=1,mirror=1,invert=1,opacity=0.55,rotation=1);
Blur
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadiu
s=4,MakeShadow=false);
Chroma
filter: progid:DXImageTransform.Microsoft.Chroma(
Color=#FFFFFF);
T
ABLE
6-8
Microsoft Filter Summary
