CSS Gradients?

[xomp]

Wondering if there is anyway I can have Internet Explorer render CSS gradients correctly (or at least how Firefox renders them).

The code I'm using to give it the gradient is:

-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background:rgba(239,91,10,.75);
background:-moz-repeating-linear-gradient(top left -45deg, #1F2225, #1F2225 5px, #303030 5px, #303030 10px);
background:-webkit-gradient(linear,left top,left bottom,from(rgba(243,52,8,.75)),to(rgba(239,91,10,.75)));
background:linear-gradient(top,rgba(243,52,8,.75),rgba(239,91,10,.75))

[Omar G.]

This is the filter you need to use for IE to render css3 gradients:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#FFFFFF');

Hope it helps.

[Aries-Belgium]

Try this:

-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background:rgba(239,91,10,.75);
background:-moz-repeating-linear-gradient(top left -45deg, #1F2225, #1F2225 5px, #303030 5px, #303030 10px);
background:-webkit-gradient(linear,left top,left bottom,from(rgba(243,52,8,.75)),to(rgba(239,91,10,.75)));
background:linear-gradient(top,rgba(243,52,8,.75),rgba(239,91,10,.75));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1F2225', endColorstr='#303030');

I added the filter attribute.

[xomp]

@Sama34 Cool, that seems to have changed things a bit.

Try this:

-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background:rgba(239,91,10,.75);
background:-moz-repeating-linear-gradient(top left -45deg, #1F2225, #1F2225 5px, #303030 5px, #303030 10px);
background:-webkit-gradient(linear,left top,left bottom,from(rgba(243,52,8,.75)),to(rgba(239,91,10,.75)));
background:linear-gradient(top,rgba(243,52,8,.75),rgba(239,91,10,.75));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1F2225', endColorstr='#303030');

I added the filter attribute.

Great! even though it doesn't look like Firefox it's at least not orange lol

[faviouz]

Just generate a background at http://www.stripegenerator.com/ and use it as the background. CSS3 is not worth it in this case.

The filters and hacks would be very complex in order to emulate what you currently have. If you really want to use CSS3 though, I recommend using something like CSS3PIE.

[xomp]

Just generate a background at http://www.stripegenerator.com/ and use it as the background. CSS3 is not worth it in this case.

The filters and hacks would be very complex in order to emulate what you currently have. If you really want to use CSS3 though, I recommend using something like CSS3PIE.

Not a bad suggestion, how could I go about doing that exactly? I'm not all that pro with CSS heh

[faviouz]

You mean using the stripe image as the background? It's pretty simple.

What's the full code of the class where you're applying the gradient?

[xomp]

Ah I managed to sort it Thanks for the help!