Question

Does anyone know of a way to chain the proprietary filter properties in CSS.

For example I have a div.example and I want to give it a background gradient and a drop shadow. So I’d like to do something like this:

div.example {
  /* gradient */
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#cb141e78,endColorstr=#cb1dde78);
  /* shadow */
  filter: progid:DXImageTransform.Microsoft.dropShadow(color=00143c, offX=0, offY=3, positive=true);
}

Except this will of course leave only the drop shadow. Anyone know a good workaround?

Answer 1

Doesn’t this work:

div.example {
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#cb141e78,endColorstr=#cb1dde78)
  progid:DXImageTransform.Microsoft.dropShadow(color=00143c, offX=0, offY=3, positive=true);
}

http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx