Borders and backgrounds with CSS3 - HTML5 and CSS3 - page 389

DropShadow can accept a color value with alpha
transparency(make sure all this code goes on a
single line in your CSS ):

-ms-filter: "progid:
➥ DXImageTransform.Microsoft.DropShadow

➥

(color=#ff000000, offX=4, offY=4)"

The color parameter here uses four hexadecimal
pairs. The last three pairs are equivalent to the
way you specify black in CSS : #000000 . The first
hex pair is a value between 0 and 255 for opac-
ity: FF is fully opaque.

Shadow fades the color to transparent, like box-
shadow , but you must specify an opaque color:

-ms-filter: "progid:
➥

DXImageTransform.Microsoft.Shadow(

➥ color=#000000, direction=135,

➥

strength=4)"

The main difference between the two is that Shadow applies a gradient to
the edges, whereas DropShadow is a constant color. The listing for this
example is in ch10/shadow-ie-1.html.

The example has a background color on the element to which the
shadow applies so it will apply to the entire element rather than
just the text. If you want a shadow on the text, you need to leave
the background transparent. As you may guess, this makes applying a
shadow to both the text and the box a bit more interesting.

There's also an IE filter for gradients. Here are
two examples; the full code is in ch10/gradient-
ie-1.html (the lines have been broken so they fit
on the page; in your CSS make sure they appear
on a single line):

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(
GradientType=1, startColorstr=#CC1C5B9B, endColorstr=#E56CBFFF)";