Best IT Recipes

Gradient colors in Internet Explorer

I know that Internet Explorer has some proprietary extensions so you can do things like create a div with a gradient background. I can’t remember the name of the element or its use. Does anyone have examples or links?

+49
html css internet-explorer background gradient
Oct 17 '08 at 20:35
source share
10 answers

Look at custom CSS filters that IE can handle http://msdn.microsoft.com/en-us/library/ms532847.aspx

+23
Oct 17 '08 at 20:37
source share

The code I use for all browser gradients is:

background: #0A284B; background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); background: -webkit-linear-gradient(#0A284B, #135887); background: -moz-linear-gradient(top, #0A284B, #135887); background: -ms-linear-gradient(#0A284B, #135887); background: -o-linear-gradient(#0A284B, #135887); background: linear-gradient(#0A284B, #135887); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887'); zoom: 1;

You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.



Update:

The following is the version of LESS Mixin (CSS) for all LESS users:

 .gradient(@start, @end) { background: mix(@start, @end, 50%); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")"; background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); background: -webkit-linear-gradient(@start, @end); background: -moz-linear-gradient(top, @start, @end); background: -ms-linear-gradient(@start, @end); background: -o-linear-gradient(@start, @end); background: linear-gradient(@start, @end); zoom: 1; }
+84
Jun 18 '10 at 13:09 on
source share

The filter style should work for IE8 and IE9.

 .gradientClass { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); }
+11
May 28 '10 at 2:26
source share

The significant problem when it comes to gradients in IE is that although you can use Microsoft filters ...

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE'); zoom:1;

... they kill the pure type for any text covered by the gradient. Given that the purpose of gradients is, as a rule, to make the user interface better to show a stopper for me.

So, for IE, I use a repeating background image instead. If the css background image is combined with a CSS gradient for other browsers (according to Blowsie's answer), other browsers will ignore the background image in favor of the css gradient, so it will only apply to IE.

 background-image: url('/Content/Images/button-gradient.png');

There are many sites that you can use to quickly create a gradient background; I use this one .

+7
Dec 20 '11 at 1:01
source share

A great tool from Microsoft, it lets you view colors in real time and generates CSS for all browsers: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

 /* IE10 */ background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Opera */ background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Proposed W3C Markup */ background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
+6
Apr 27 2018-12-12T00:
source share

Just thought I'd add this useful link: http://css3please.com/

Shows how to make gradients work in all browsers.

+4
Mar 23 2018-11-11T00:
source share

Note that IE10 will support gradients as follows:

 background: -ms-linear-gradient(#017ac1, #00bcdf);
+3
Jul 15 '11 at 16:50
source share

To the right of ScriptFX.com article :

 <body bgcolor="#000000" topmargin="0" leftmargin="0"> <div style="width:100%;height:100%; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#FF006600', EndColorStr='#ff456789')"> Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below </div> </body>
+2
Oct 17 '08 at 20:40
source share

Try the following:

 .red { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */ height: 0; /* gain layout IE5+ */ zoom: 1; /* gain layout IE7+ */ }
+1
Jun 30 '11 at 15:57
source share

Two things I discovered while struggling with IE 9 gradient.

  • -ms-filter did not work for me. I had to just use filter .
  • I had to add height: 100% to my class so that IE uses the gradient.
0
May 6 '12 at 3:45 p.m.
source share


More articles:


All Articles