Related
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.
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.
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 want a vertical gradient without using an image. So, I've got this bit of CSS working on Firefox and Chrome, but it isn't working in IE9.
background: #fff;
background: -moz-linear-gradient(top, #46a5e5, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#46A5E5), to(#ffffff));
filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#46A5E5', EndColorstr='#ffffff', GradientType=0);
Any advice?
looks like you're missing the up to date prefixed version of the IE filter for IE8 & 9.. though the older still works in IE8
try:
filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#46A5E5', EndColorstr='#ffffff', GradientType=0); /* IE6/7/8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#46a5e5', endColorstr='#ffffff')"; /* IE8/9 */
zoom: 1;
the new version must not be broke (it must stay on one line between the quotes)..
This article from Smashing Magazine may be helpful to you when designing for IE with CSS3.
One thing I have learned over the years is it is ok that your website doesn't look exactly the same in each browser, in fact it can be a benefit because I have had situations where the intended design looked fairly different in IE (but still still professional) and some users who preferred that UI would visit with IE instead of the beloved FireFox or Chrome.
Also with IE9, a lot of compatibility to CSS3 and HTML5 has been added so making your site or web app look consistent over all browsers is getting easier!
Just my 2 cents... I hope it helps.
Try this... I think height: 1% will solve this problem
background: #fff;
background: -moz-linear-gradient(top, #46a5e5, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#46A5E5), to(#ffffff));
filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#46A5E5', EndColorstr='#ffffff', GradientType=0);
height: 1%;