CSS Gradients & Shadows on IE - css

I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject? I put the site up so you can see the full code and output.
Test Site
I am using lesscss, so maybe that is my issue? I hope not!!! I am also using the IE CSS3 Fix, ie-css3.htcThe code I am using is as follows... I was attempting to do this without the htc, but with no luck.. at least the htc got my background gradients to work in IE... before it was showing only blue-black, the default Microsoft background gradient colors.
predefine.less
.RUNgradient(#COLOR: #CLR1){
#CLRL:lighten(#COLOR, 10%);
#CLRD:darken(#COLOR, 10%);
background-color: #CLRL;
background-repeat:repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#CLRL), to(#CLRD));
background-image: -moz-linear-gradient(top, #CLRL, #CLRD);
background-image: -ms-linear-gradient(top, #CLRL, #CLRD);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CLRL), color-stop(100%, #CLRD));
background-image: -webkit-linear-gradient(top, #CLRL, #CLRD);
background-image: -o-linear-gradient(top, #CLRL, #CLRD);
background-image: linear-gradient(top, #CLRL, #CLRD);
behavior: url(css/ie-css3.htc);
}
styles.less
div.wrapper{
width:500px;
margin:25px auto;
padding: 10px 25px;
text-align:center;
.RUNgradient;
.RUNshadow;
p{
font:24px #HEADERFONT;
color:#ffffff;
.RUNtextshadow;
}
}
Filters are the answer! Almost...
For the gradient,
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
And for the shadows,
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")";
Only thing left is changing the direction in a way to have the shadow visible all around the element, not just to one side.
Solution
After researching Microsoft Filters, I figured out how to get a similar effect. The corners are a bit rough for my liking, but this is MUCH closer than before!
This is the shadow filer I used...
.RUNshadow(#BLURRING:10px){
#SCLR:#111111;
#DIR:225;
#DIR2:45;
#DIR3:135;
#DIR4:315;
#STR:4;
box-shadow: 0px 1px #BLURRING #111111;
-moz-box-shadow: 0px 1px #BLURRING #111111;
-webkit-box-shadow: 0px 1px #BLURRING #111111;
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR2~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR3~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR4~", Strength="#STR~")";
}

I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject?"
Yeah, that's normal. Most people don't bother. Remember to ask yourself, Do Websites Need To Look Exactly The Same In Every Browser?
If you really want this, you'll have to use the gradient filter for IE. Add the following style to your RUNgradient class:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";

For both of them you can use IE filters.
You can use the gradient filter for gradients and the Shadow filter for shadows. The gradient filter works very well, the shadow filter looks really bad.
You can read in the documentation of the filters how to use them. But if you want to do it automatic you need see how CSS3 please is dealing with the filters and convert gradients to IE filter gradients.

You need to add these lines to the style tag for making this to work in IE,
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
Sample code Snippet:
.ms-viewheadertr ms-vhltr
{
background: #222 ;/when gradients doesn't fill it fills the color/
background: -webkit-linear-gradient(#444, #222);/* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#444, #222);/* For Firefox 3.6 to 15 */
background: -o-linear-gradient(#444, #222);/* For Opera 11.1 to 12.0 */
background: linear-gradient(#444, #222);/* Standard syntax */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
}

Related

Bad looking linear gradient at Firefox

I'm giving my a linear gradient but in Firefox, even new versions, what I get is something like bars of solid color building the gradient. This is what's in my CSS:
background-color: #d3d3d3;
background-repeat: repeat-x;
background: -moz-linear-gradient(top, rgba(145,145,142,1) 0%, rgba(253,253,253,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#fcfcfc');
background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253));
According to this, it is most unlikely you are facing a version problem. Firefox, as usual, was the first to implement a standards-compliant (no prefix) CSS property (and it has already been 9 versions back).
Try removing the background-repeat property as it is mostly useless for gradients unless you've set a background size. If it solves, I'd recommend posting a bug report on Bugzilla. Does it work well on IE10 and Chrome?

Why is Chrome bailing on this gradient setting?

I'm not getting a gradient in Chrome, but it works in Safari and Firefox. Here is the code:
.accounts-form #auth-form {
background: -moz-linear-gradient(#FEFEFE, #F4F4F4) repeat scroll 0 0 #F4F4F4;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
margin: 0;
padding: 0 0 40px;
}
It's that background: line that is causing the issue. I have seen other people have the issue with -webkit-gradient, just not -moz-linear-gradient.
The following is the syntax of how a gradient should be applied over a background.
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
It is usually advised to write the code in native version and then run it through http://prefixr.com/ to complete the code with all the browser compatible vendor-prefixes.
Chrome needs a -webkit-gradient; and Chrome 10+ uses a slightly different -webkit-gradient than some earlier versions I believe.
I use this CSS3 gradient generator - whether or not you use the generated code, it gives a good idea of all the properties you will need for each browser.
http://www.colorzilla.com/gradient-editor/

CSS prefixes to achieve cross browser gradient

I'm hoping to achieve a cross browser gradient, if you inspect the anchor at the top right corner running inline with the branding of my mobile site it has been styled with the prefix moz for Firefox:
www.test-bed.co.uk/mobile/
background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;
May I ask is there is a similar way to achieve a cross browser gradient solution with the IE, Opera and webkit prefixes?
An online tool that automates CSS gradient rule generation for all modern browsers: little link.
But generically, here's the main syntax:
background: #color; /*fallback*/
background: -moz-linear-gradient(...);/*Firefox*/
background: -webkit-gradient(...);/*Chrome + Safari*/
background: -webkit-linear-gradient(...);/*Another Chrome + Safari*/
background: -o-linear-gradient(...); /*Opera*/
background: -ms-linear-gradient(...); /*IE10+*/
background: linear-gradient(...); /*W3C standards*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#color', endColorstr='#color',GradientType=0); /*IE6-9*/
Take a look at CSS3 Please. I personally like their indentation style.
.box-gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}
As you can see, there is no -ms- prefix needed since IE10 supports the W3C syntax right away. Please make sure that you use the correct W3C syntax for linear-gradient()!
If you are using firefox as a browser. then you may want to use the addon called colorzilla. It is a nice tool that comes with options like Color picker, Eye Dropper, Pallette browser, CSS gradient generator, web page DOM code Analyzer , inspect Last element as well as zoom.
However you can generator css gradient'sat the folllowing link:
http://www.colorzilla.com/gradient-editor/

Gradient style in a div background, is not working in IE

I'm trying to make a nice frame for a logo that will be inserted in a webpage I'm working on. And for some reason IE won't display that div, with the fading color. All I want is a simple gradient in an empty div with predefined dimensions. Google chrome is displaying it just like I want, but IE is not displaying anything. And since I have copied the gradient part from here without understanding a word, I cannot debug it.
Here is the code (in a very reduced version):
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-8-i">
<style>
#headGreen{
float: left;
margin: 52px 0px 0px 0px;
width : 300px;
height: 30px;
background-image: linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -o-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -moz-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -webkit-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -ms-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.04, rgb(255,255,255)),
color-stop(0.82, rgb(68,179,68))
);
}
#header{
width: 800px;
height: 100px;
}
</style>
</head>
<body>
<div id="header">
<div id="headGreen"></div>
</div>
</body>
</html>
I'm using IE9, but I would like it to work in others also.
Thanks :)
Gradients In Internet Explorer going all the way back to Version 6 got you down?
No worries! Check out CSS3Pie.
http://css3pie.com/
Thanks, hope this helps!
Aaron
-ms-linear gradient is only available in IE 10.
Use the following:
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
filter is supported in IE7-
-ms-filter is recommended in IE8 - 9. Important note: the property value has to be quoted.
See CSS3 cross browser linear gradient for a detailled explanation on the gradient filter syntax.
I recommend using the Ultimate CSS Gradient Generator for generating gradients.
It utilizes IE's native filters and ensures compatibility all the way back to IE6. I use this all the time.
I don't think that IE9 is already supporting this all I found is this:
http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
Referring to CSS3 Please IE10 will support it.
http://css3please.com/
I think the older versions will work as they are :
/*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)";
background-color: transparent;
background-color: rgba(180, 180, 144, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
zoom: 1;
The following filter wlil only be read by IE:
#headGreen{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#44B244');
}

CSS Rounded Table Corners, Gradient Background

Here's me fiddle:
http://jsfiddle.net/6yU6N/10/
I want to work some CSS magic on the table header:
Rounded corners in upper left and upper right
Gradient color background
Gradient border
Cross-browser compatibility
How can this all be done?
Gradients:
Most modern browsers have implemented these using CSS3 but for Internet Explorer you'll have to use special filters. Since CSS3 is an emerging standard, you have to use browser specific prefixes.
.gradient{
background: -moz-linear-gradient(top, #fff, #eee);
background: -webkit-linear-gradient(top, #fff, #eee);
background: -o-linear-gradient(top, #fff,#eee);
background: linear-gradient(top, #fff, #eee);
/* versions of IE use these */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff',EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eeeeee)";
}
there may be a third approach
keep in mind that you could always use an image with a repeat-x on the background.
Rounded Corners:
Rounded corners are covered by border-radius in most of your modern browsers:
border-radius:5px 5px 0px 0px;
For older versions of Internet Explorer, you'll unfortunately have to do more hackerly things that are probably not worth the time and effort really. http://webdesign.about.com/od/css/a/aa072406.htm is an example I found scanning the web really quickly.
For more stuff, the MDC is usually pretty good in my experience about explaining browser features and their compatibility and alternatives for the other browsers.

Resources