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%;
Related
So please tell me any trick or IE hack. Here is a simple example in my codepen that contains the same issues.
http://codepen.io/ektad/pen/vyQaLm
Possible Dupe of SO
Prior to IE 11,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');
For IE 11:
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
That's right folks, we not only have to worry about supporting older IEs, apparently we'll now have to deal with NEWER IE quirks as well...
.button button {
background: linear-gradient(0 Bottom, #00664F, #64A70B);
background: -ms-linear-gradient(0 Bottom, #00664F, #64A70B);
background: -webkit-gradient(linear,0 Bottom, Left Top, from(#00664F), to(#64A70B));
background: -moz-linear-gradient(73px Bottom, #00664F, #64A70B);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#00664F, endColorstr=#64A70B)
-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#00664F, endColorstr=#64A70B)
position:relative;
border: medium none;
}
The Gradient is working fine is IE-8,9,Chrome,Mozzila but it is not working in IE-10. is any suggestion or solution for it
MS old browsers (7/8/9) recognize the filter directive:
.for-ms-only{filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',
startColorstr=#550000FF, endColorstr=#55FFFF00)}
and for IE10 you got the other answer
-ms-linear-gradient(top, #00664F, #64A70B); /* IE10 Consumer Preview */
linear-gradient(to Bottom, #00664F, #64A70B); /* W3C Markup, IE10 Release Preview */
Use colorzilla to make your gradients with the tick for the IE9 support
http://www.colorzilla.com/
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.
I have a pretty elementary knowledge of HTML, CSS, and Bootstrap. So please forgive me if any of the terminology is wrong.
This is the page: http://jowoco.com/stackoverflow/scheduletech.html
On large monitors (resolutions > 1500px) or zoomed out screens (ctrl/cmnd + "-"), you'll see the colors just stop. Ideally the angles would continue, but at the very least it would be nice just to have the colors continued to left and right of the screen as solids (see mock).
I've attached a screenshot of what I think might work as a fix (not sure if it's a div or span), but not sure how to do it in actual practice.
Thanks so much in advance for your help and time,
Wojo
There are a few ways to do this...but the easiest by far is to create a linear gradient background for the page, rather than straight white.
This would allow the bar to go from edge to edge even if the main body of the page stops.
Unfortunately, you have not given quite enough information for me to simply hand you the code for it:
What is the angle of the blue stripe?
Does the geometry of your page change when the browser window is resized? Specifically, does that blue banner move at all?
Which browsers do you need to be able to support?
If you have answers to these questions, feel free to drop them here, and I will update this answer.
If you would rather take a crack at the code yourself, you can generate is at Colorzilla. The resulting code will look something like this:
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(45deg, #ffffff 50%, #91b5b5 50%, #91b5b5 71%, #ffffff 71%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(50%,#ffffff), color-stop(50%,#91b5b5), color-stop(71%,#91b5b5), color-stop(71%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* IE10+ */
background: linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
This code covers all browsers between Firefox, earlier and more recent Chrome, and even down to IE 6-9.
The code, generally, looks far worse than it is... for the bulk of the code, you can directly set the angle at which the blue bar should appear; the exceptions being IE6-9 and earlier versions of Chrome.
Earlier versions of Chrome are probably nearly non-existent, since Chrome generally auto-updates itself... but the earlier Internet Explorer, as always, can be problematic.
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;