HTML and CSS Reference
In-Depth Information
Combining Several Filters
Several Internet Explorer filters can be combined to apply multiple visual effects to the
same object. The syntax is
filter:
filter1 filter2
… ;
where
filter1
,
filter2
, etc. are the Internet Explorer filters. Filters are added in the
order in which they appear in the filter style. For example, the following style combines
the
Wave
filter and the
Shadow
filter to create the effect shown in Figure 8-12:
filter: progid:DXImageTransform.Microsoft.Wave(freq=2,strength=10),
progid:DXImageTransform.Microsoft.Shadow(direction=135,
strength=20, color=#5A7F00);
figure 8-12
combining two ie filters
filter: progid:DXImageTransform.Microsoft.Wave(freq=2,strength=10),
progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=20,
color=#5A7F00);
Note that you cannot combine filters by adding multiple filter statements as you do
with multiple CSS style lines. When Internet Explorer encounters more than one
filter
statement, the last one listed supersedes all of the previous filters.
You discuss with Kevin the issue of using the Internet Explorer filters on the Tree and
Book Web site. You decide that adding support for this browser-specific feature would
complicate the development and maintenance of the Web site, and you opt to develop
the Web site based only on CSS3 standards.
Rotating an Object
Kevin feels that the four photos are too tightly bunched on the page. He would like
you to add some space and visual flow to the page by rotating the lower-left photo 30°
counter-clockwise and the lower-right photo 30° clockwise. To rotate a page object, you
can use the CSS3
transform
styles.
The
transform
Styles
Styles that modify the placement or orientation of a page object are organized under the
transform
style
transform:
effect
(
params
);
where
effect
is the transformation function that will be applied to the object, and
params
are any parameters required by the transformation. Figure 8-13 describes some
of the CSS3 transformation functions.
