CSS Gradients & Shadows on IE

Question

I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject? I put the site up so you can see the full code and output.

Test Site

I am using lesscss, so maybe that is my issue? I hope not!!! I am also using the IE CSS3 Fix, ie-css3.htc The code I am using is as follows... I was attempting to do this without the htc, but with no luck.. at least the htc got my background gradients to work in IE... before it was showing only blue-black, the default Microsoft background gradient colors.

predefine.less

.RUNgradient(@COLOR: @CLR1){
  @CLRL:lighten(@COLOR, 10%);
  @CLRD:darken(@COLOR, 10%);
  background-color: @CLRL;
  background-repeat:repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(@CLRL), to(@CLRD));
  background-image: -moz-linear-gradient(top, @CLRL, @CLRD);
  background-image: -ms-linear-gradient(top, @CLRL, @CLRD);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @CLRL), color-stop(100%, @CLRD));
  background-image: -webkit-linear-gradient(top, @CLRL, @CLRD);
  background-image: -o-linear-gradient(top, @CLRL, @CLRD);
  background-image: linear-gradient(top, @CLRL, @CLRD);
  behavior: url(css/ie-css3.htc);
}

styles.less

div.wrapper{
    width:500px;
    margin:25px auto;
    padding: 10px 25px;
    text-align:center;
    .RUNgradient;
    .RUNshadow;
    p{
        font:24px @HEADERFONT;
        color:#ffffff;
        .RUNtextshadow;
    }
}

Filters are the answer! Almost...

For the gradient,

 filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@CLRL~", EndColorStr="@CLRD~")";

And for the shadows,

 filter: ~"progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR~", Strength="@STR~")";

Only thing left is changing the direction in a way to have the shadow visible all around the element, not just to one side.

Solution

After researching Microsoft Filters, I figured out how to get a similar effect. The corners are a bit rough for my liking, but this is MUCH closer than before!

This is the shadow filer I used...

.RUNshadow(@BLURRING:10px){
    @SCLR:#111111;
    @DIR:225;
    @DIR2:45;
    @DIR3:135;
    @DIR4:315;
    @STR:4;
  box-shadow: 0px 1px @BLURRING #111111;
  -moz-box-shadow: 0px 1px @BLURRING #111111;
  -webkit-box-shadow: 0px 1px @BLURRING #111111;
  filter: ~"progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR2~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR3~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR4~", Strength="@STR~")";
}

Answer 1

I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject?"

Yeah, that's normal. Most people don't bother. Remember to ask yourself, Do Websites Need To Look Exactly The Same In Every Browser?

If you really want this, you'll have to use the gradient filter for IE. Add the following style to your RUNgradient class:

filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@CLRL~", EndColorStr="@CLRD~")";

Answer 2

For both of them you can use IE filters.

You can use the gradient filter for gradients and the Shadow filter for shadows. The gradient filter works very well, the shadow filter looks really bad.

You can read in the documentation of the filters how to use them. But if you want to do it automatic you need see how CSS3 please is dealing with the filters and convert gradients to IE filter gradients.

Answer 3

You need to add these lines to the style tag for making this to work in IE,

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */

Sample code Snippet:

.ms-viewheadertr ms-vhltr { background: #222 ;/ when gradients doesn't fill it fills the color /

background: -webkit-linear-gradient(#444, #222);/* For Safari 5.1 to 6.0 */

background: -moz-linear-gradient(#444, #222);/* For Firefox 3.6 to 15 */

background: -o-linear-gradient(#444, #222);/* For Opera 11.1 to 12.0 */

background: linear-gradient(#444, #222);/* Standard syntax */

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */

}