[thelist] Gradient CSS and IE 4+

James Aylard webmaster at equilon-mrc.com
Wed Jul 18 12:05:07 CDT 2001


Andre,

> hopefully someone can help me out here... i need to find a way to generate
a
> gradient shade that is controlled by css so it can be easily updated.  The
> problem is that is has to work in IE 4 or 5.

    Depending on what you need, you can do this with a little tinkering
using the IE 4-compatible Alpha filter. If you set a background color on
your div, and then apply the alpha filter with different starting and
finishing opacities, you can create a gradient effect with the color that is
behind the div (or you can use absolute positioning to place another div
above or below the existing div).
    Oh, and I should warn you that the alpha filter applies to *everything*
in the div -- not just the background-color (so you might want to use two
additional absolutely positioned divs, and apply the filter to them).
    The syntax for the filter is:

<style type="text/css">
  <!--
    div {
      filter: Alpha(Opacity=nnn, FinishOpacity=nnn, Style=n,
        StartX=nnn, StartY=nnn, FinishX=nnn, FinishY=nnn) ;
    }
  -->
</style>

Possible values:
* Opacity and FinishOpacity: 0 (fully transparent) through 100 (fully
opaque)
* Style: 0 (uniform), 1 (linear), 2 (radial), 3 (rectangular)
* StartX, StartY, FinishX, FinishY: beginning and ending x and y coordinates

    If you can get your hands on an IE 4 or IE 5 version of Microsoft's
Internet SDK, you'll find a complete filter reference for all IE 4+ filters.

James Aylard





More information about the thelist mailing list