The style needs to be backward compatible.
Tried googling -webkit-gradient syntax and figure it out myself, but can't find the document......
So, what's the equivalent -webkit-gradient of this CSS:
background: -webkit-linear-gradient(left, #E0E0E0 0%, #E0E0E0 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 100%),
-webkit-linear-gradient(top, #F9FCF6 0%, #BBE6BF 100%); /* Chrome10+,Safari5.1+ */
Here you go. -webkit-gradient was only used in Chrome 4-9 and Safari 4-5. I'm surprised that it's still supported in the Safari 9:
background:
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(224,224,224,1)), color-stop(10%, rgba(224,224,224,1)), color-stop(11%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0))),
-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249,252,246,1)), color-stop(100%, rgba(187,230,191,1)));
Demo
Try before buy
The -webkit- is a hack for the Webkit Browser engine. In this case, applied to the linear-gradient CSS property.
Usually, the first thing we must have in mind when using CSS3 is that some old browsers could not support this "new" property (or many others).. So we use the common background always, covering the legacy engines simply.
Together with the property and the -webkit- hack, we have hacks for another old browser engines like Mozilla Firefox, Internet Explorer, Safari and Opera.
Take a look at this example
.some-class{
/* Fallback (could use .jpg/.png alternatively) */
background-color: red;
/* SVG fallback for IE 9 (could be data URI, or could use filter) */
background-image: url(fallback-gradient.svg);
/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
background-image:
-webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background-image:
-webkit-linear-gradient(left, red, #f06d06);
/* Firefox 3.6 - 15 */
background-image:
-moz-linear-gradient(left, red, #f06d06);
/* Opera 11.1 - 12 */
background-image:
-o-linear-gradient(left, red, #f06d06);
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background-image:
linear-gradient(to right, red, #f06d06);
}
You can see more explanations at:
https://css-tricks.com/css3-gradients/
And:
http://www.w3schools.com/css/css3_gradients.asp
Hope it helps!
The new standard is to use background-image: linear-gradient().
The following browser versions (or later) support the new 'un-prefixed' version of background-image: linear-gradient():
Chrome: 26
Safari: 6.1
Firefox: 16
Opera: 15
IE: 10
Android: 4.4
iOS: 7.0
If you want to learn more about CSS Gradients, and the new 'un-prefixed' syntax, I'd recommend having a read of this CSS-Tricks article.
Related
I want to combine background image and gradient. It should work in IE. my image is 3px width and 3px height. I am planning to give repeat for the background. How can we done it for Internet Explorer ???
Thanks in Advance
background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL), -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image: url(IMAGE_URL), -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: url(IMAGE_URL), -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: url(IMAGE_URL), linear-gradient(top, #444444, #999999); /* W3C */
First 2 lines are the fallback for any browser that doesn't do gradients. See notes for stacking images only IE < 9 below.
Line 1 sets a flat background color.
Line 2 sets the background image fallback.
The rest set a background image and gradient for specific browsers.
Line 3 is for old webkit browsers.
Line 4 is for newer webkit browsers.
Line 5 is for Firefox 3.6 and up.
Line 6 is for Internet Explorer 10.
Line 7 is for Opera 11.10 and up.
Line 8 is what one day all the browsers will hopefully use.
See http://www.w3.org/TR/css3-background/#layering for more information about it.
Also see http://css3please.com for cross-browser css3 templating. Currently it doesn't allow you to do multiple backgrounds with gradients, but it gives you the browser prefixes and is kept up to date.
Stacking images ONLY (no gradients in the declaration) For IE < 9
IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML element along with your fallback code:
.lte9 #target{ background-image: url(IMAGE_URL); }
If you need to target IE versions IE9 or earlier, they do not support CSS gradients.
There are work-arounds using filter and other hacks, but you will struggle to get those working if you want a background image as well.
My advice, therefore, is to use the CSS3Pie polyfill script. This library adds gradient support to older IE versions. It should be able to do what you want.
You'll end up with code like this in your CSS:
#myElement {
background: url(bg-image.png) #CCC; /*non-CSS3 browsers will use this*/
background: url(bg-image.png), -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: url(bg-image.png), -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: url(bg-image.png), -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: url(bg-image.png), -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*CSS3-compilant browsers*/
-pie-background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*PIE*/
behavior: url(PIE.htc);
}
Please see the CSS3Pie documentation for further info.
Seems that the below code doesn't work with ie9. Is there a workaround?
Thanks
.orangeback {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FF6900 0%, #FF8214 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FF6900 0%, #FF8214 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FF6900 0%, #FF8214 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF6900), color-stop(1, #FF8214));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FF6900 0%, #FF8214 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FF6900 0%, #FF8214 100%);
}
This is pretty close:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff6900', endColorstr='#ff8214',GradientType=0 );
This works in IE6+.
Or, for JUST IE9, you can replace it with an SVG by using the following styles, if the filter option doesn't float your boat:
Add to .orangeback:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjkwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjgyMTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
Also add .ie9-gradient class to these elements, and add the following before the closing head tag:
<!--[if gte IE 9]>
<style type="text/css">
.ie9-gradient {
filter: none;
}
</style>
<![endif]-->
To use the SVG polyfill for CSS3 gradients in IE9 you need to disable filter, so this code retains the filter gradient fallback for IE6-8 and uses SVG for IE9.
In your case, there is not really a need to use the SVG polyfill for IE9 because you are using a normal 2 color linear gradient. If you had a more complex gradient the second solution would probably be preferable, but for your purposes just using the filter solution should work fine.
Use this (or a CSS preprocessor) and never worry about CSS3 gradients again: Colorzilla Gradient Generator
Try
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
Let me know if it works.
In my current project, I've used CSS3 gradient in my CSS file. To support IE browser, I've used filter property as well. Following is my code:
.card.active .content.back {
background: #333; /* Old browsers */
background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
}
But when I use the filter property in the above code, the border-radius property is not working. If anyone know a fix for this, please share it with me.
Thanks
You can use PIE.htc for your desired results.
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
In addition, PIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.
http://css3pie.com/
or see the demo:- http://jsfiddle.net/ZxzSs/1/
for support PIE.htc you have to keep the PIE.htc file on your root folder than will work for your website....
You should be able to apply the gradient to a child of the element with the rounded corners. I don't have access to IE9 on my home machine but this should work:
.element {
background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
border-radius: 10px;
}
.element .ie-helper {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}
HTML:
<div class="element">
<!--[if lt IE 9]><div class="ie-helper"><![endif]-->
<p>Your content with gradient and rounded corners...</p>
<!--[if lt IE 9]></div><![endif]-->
</div>
If the page is viewed in IE10+ or other browsers, both the gradient and rounded corners will apply to same element (assuming you bring back the vendor-specific prefixes from your code sample). The inner div.ie-helper will only render on IE9 and below because of the conditional comments used.
This isn't ideal but would get the job done, but since you're after such a wide range of browsers to be fully supported this is a reasonable workaround
I'm using gradient as a background:
-moz-linear-gradient(center bottom , #E8E8E8 0%, #F2F2F1 50%) repeat scroll 0 0 #F5F5F4;
This is not showing in IE, I haven't found links or anything about what I need to do if the browser is IE.
Any ideas on how to handle this?
You might be interested in reading this: prefix or posthack.
As the comments state -moz- is the vendor specific prefix for Mozilla.
If you're interested in cross browser gradients, I find the easiest way is to use a gradient generator to sort through all the different implementations and prefixes.
this is the gradient code for all browsers
/* IE10 */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
you can use this site to generate gradient ultimate css generator
it's not supported in IE9 so you can make a little section of the gradient and repeat it
Linear gradient drawing via CSS3 is still experimental. The CSS function you provided is Mozilla specific, as indicated by the -moz prefix. But not all is lost, as Microsoft has their own implementation as well (-ms-linear-gradient)
Upon cursory glance, it appears you can simply copy that line and simply change -moz to -ms with near perfect compatibility. Refer to the documentation if you run into any issues.
Use the gradient filter for IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* for IE */
I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?
The code I use for all browser gradients:
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:
Here is a LESS Mixin (CSS) version for all you LESS users out there:
.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;
}
Look at the custom CSS filters IE can handle
http://msdn.microsoft.com/en-us/library/ms532847.aspx
The filter style should work for IE8 and IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
A significant gotcha when it comes to gradients in IE is that although you can use Microsoft's filters...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
...they kill clear type on any text covered by the gradient. Given that the purpose of gradients is normally to make the UI look better, that's a show stopper for me.
So for IE I use a repeating background image instead. If the background image css is combined with the gradient CSS for other browsers (as per Blowsie's answer), other browsers will ignore the background image in favour of the gradient css, so it will only end up applying to IE.
background-image: url('/Content/Images/button-gradient.png');
There are plenty of sites you can use to quickly generate a gradient background; I use this.
Great tool from Microsoft, allows you to examine colors 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%);
Just thought I'd add this useful link: http://css3please.com/
Shows how to get gradients working in all browsers.
Note that IE10 will support gradients as follows:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Right from 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>
Try this:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
Two things I discovered while struggling with IE 9 gradient.
The -ms-filter did not work for me. I had to use simply filter.
I had to add height: 100% to my class for IE to use the gradient.
In my case I inserted it on header section
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
then in style section insert it
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;