What will be Opera and IE alternatives of following code?
background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF)); background-image: -moz-linear-gradient(right, #0C93C0, #FFF);
Note, I've tested following rules. All browsers supports them. But they are vertical gradients. How can I modify them to horizontal ones?
background-image: -webkit-linear-gradient(top, #0C93C0, #FFF); background-image: -moz-linear-gradient(top, #0C93C0, #FFF); background-image: -ms-linear-gradient(top, #0C93C0, #FFF); background-image: -o-linear-gradient(top, #0C93C0, #FFF); background-image: linear-gradient(top, #0C93C0, #FFF);
Cross Browser Compatibility Solution For CSS Linear Gradient. All desktop browsers including Internet Explorer 11 and Microsoft Edge provide browser support for Linear CSS Gradients, meaning these CSS Gradients offer excellent cross browser compatibility.
CSS Linear GradientsTo create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
SVG provides for two types of gradients: linear gradients and radial gradients. Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.
background-image: -ms-linear-gradient(right, #0c93C0, #FFF); background-image: -o-linear-gradient(right, #0c93C0, #FFF);
All experimental CSS properties are getting a prefix:
-webkit-
for Webkit browsers (chrome, Safari)-moz-
for FireFox-o-
for Opera-ms-
for Internet ExplorerUse top right
instead of right
, if you want a different angle. Use left
or right
if you want a horizontal gradient.
See also:
linear-gradient
For <IE10, you will have to use:
/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0); /*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
filter
works for IE6, IE7 (and IE8), while IE8 recommends the -ms-filter
(the value has to be quoted) instead of filter
. A more detailled documentation for Microsoft.Gradient
can be found at: http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx
-ms-filter
syntaxSince you're a fan of IE, I will explain the -ms-filter
syntax:
-ms-filter: progid:DXImageTransform.Microsoft.Gradient( startColorStr='#0c93c0', /*Start color*/ endColorStr='#FFFFFF', /*End color*/ GradientType=0 /*0=Vertical, 1=Horizontal gradient*/ );
Instead of using a RGB HEX color, you can also use a ARGB color format. A means alpha, FF means opaque, while 00
means transparent. The GradientType
part is optional, the whole expression is case-insensitive.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With