HTML and CSS Reference
Using the Alpha Filter to Create Transparent Gradients
Internet Explorer's Alpha filter also can be used to create gradient effects in which a
page object appears to fade away in a linear, radial, or rectangular direction. The gen-
eral syntax of the Alpha filter is
Alpha(style= type , opacity= value , finishOpacity= value , startX= value ,
finishX= value , startY= value , finishY= value )
where type is equal to 0 (for a uniform opacity), 1 (for a linear gradient), 2 (for a radial
gradient), or 3 (for a rectangular gradient); opacity and finishOpacity provide the
opacity values on a scale of 0 to 100; and startX , finishX , startY , and finishY
indicate the starting and ending points of the gradient as percentages of the object's
width and height on a scale of 0 to 100.
For example, to create a linear gradient that fades out from the top-left corner down
to the bottom-right corner, you would apply the following filter:
Alpha(style=1, opacity=100, finishOpacity=0, startX=0, finishX=100,
To create a radial gradient in which the object appears to fade out from the center,
you would apply the following filter:
Internet Explorer would apply a default opacity value of 100 to the object's center
and 0 to the object's edges. If you don't specify a style value, Internet Explorer assumes
a uniform opacity.
Working with Different Media Devices
Many visitors to the Tree and Book Web site like to print out portrait pages like the one
Kevin has created for his great-grandfather. However, these users often find that the pages
don't print well. Most users would prefer to print the photos and accompanying text
without the page header, navigation list, and page footer.
Kevin could create two versions of his page—one for computer screens and the other
for printouts—but he would like to avoid having multiple versions of the same document
on his Web site. He would much prefer to use separate style sheets: one that is designed
for users viewing the page on their computer screens, and another for printed output.
Kevin wants you to investigate how this could be done.
When a user prints a Web page, the Web browser and its built-in styles prepare the doc-
ument for the printer. The user also has some control over that process: for example, he
or she can determine the size of the page margins or the content of the printout's header
or footer. However, beyond these and similar parameters, the user cannot control what
parts of the page are printed or how they are to be best laid out on the printed page.
CSS2 and subsequent versions of CSS have given more control to Web page
authors to create output styles designed for particular devices. To do this, you can
apply the media attribute
to either a style element or a link element in your HTML file, where devices is a list
of media devices to which the style sheet should be applied. Figure 8-35 describes the
different devices supported by the media attribute.