Not Solved CSS Gradients?
#1
Not Solved Question 
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))
Reply
#2
Not Solved
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.
Reply
#3
Not Solved
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.
Reply
#4
Not Solved
@Sama34 Cool, that seems to have changed things a bit.
(2011-05-28, 03:44 PM)Aries-Belgium Wrote: 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
Reply
#5
Not Solved
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.
Reply
#6
Not Solved
(2011-05-28, 03:53 PM)faviouz Wrote: 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
Reply
#7
Not Solved
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?
Reply
#8
Not Solved
Ah I managed to sort it Smile Thanks for the help!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)