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?
Related
I'm trying to render gradient and it's collor is different on safari and chrome. How to make it identical? (Left - chrome, right - safari).
https://codepen.io/max-frai/pen/XWMEQZJ
<div id="test"></div>
#test {
width: 400px;
height: 300px;
background: -webkit-linear-gradient(top, rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
background: linear-gradient(to bottom, rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
}
You can find a good explanation of what is going on here. Basically, this has been in the working draft for years now, and Safari is the only major player who hasn't fixed it. See current status here:
Partial support in Safari and Older Firefox versions refers to not
using premultiplied colors which results in unexpected behavior when
using the transparent keyword as advised by the spec.
I guess if you were desperate, you could calculate the gradient yourself and put in a lot of stop points. Otherwise just wait for Apple to fix.
I've created radial-gradient
background: radial-gradient(ellipse at center, #595959 0%, #000000 40%);
And as far as I know, this should help me to make it cross-browser
background: -webkit-radial-gradient(ellipse at center, #595959 0%, #000000 40%);
background: -moz-radial-gradient(ellipse at center, #595959 0%, #000000 40%);
background: -ms-radial-gradient(ellipse at center, #595959 0%, #000000 40%);
background: -o-radial-gradient(ellipse at center, #595959 0%, #000000 40%);
background: radial-gradient(ellipse at center, #595959 0%, #000000 40%);
However this isn't support IE-9 and after some searching, I found this:
Create a radial gradient for Internet Explorer 6/7/8 but this doesn't seem to work anymore. And well, I'm curious how to make my gradient work in IE-9. Thanks
I think I have bad news for you.
IE9 dropped support for the old IE-specific filter styles -- ie the ones that you pointed out in the other question you linked to.
The intention was that IE9 was supposed to be properly standards compliant, and those filter styles were non standard so they were dropped. At the same time, the idea was all the functionality provided by those styles was being replaced by standards-based CSS features.
Unfortunately, as you're finding, not quite all of the functionality was replaced with standard CSS in IE9. In particular, CSS gradients were a noticeable omission and have caused a lot of code to be written using awkward work-arounds.
The bottom line is that IE9 specifically has a particular blind-spot in this area, where newer IE versions and even the older ones do support this feature one way or another.
Your only real ray of light is that IE9 usage has dropped through the floor recently; hardly anyone is still using it. So my advice is that you can probably get away with having a fall-back solution that just uses a plain background colour; let IE9 have that and concentrate on the newer browsers that people do actually use.
I have a really simple CSS radial gradient, which looks significantly different in different in Safari and others:
<style>
body {
background: #000;
}
div {
height: 200px;
width: 200px;
background-image: radial-gradient(100px, #1493a4 0%, transparent 100%);
}
</style>
<div></div>
Any ideas, how I could make them all look like the Safari version?
Safari Firefox
Fiddle: https://jsfiddle.net/2234zy6o/3/
I finally found a simple solution: Safari needs an own style:
background-image: -webkit-radial-gradient(#1493a4, transparent);
Just make sure to add it after the standard definition, other browsers then use the standard one and ignore the -webkit one, while Safari sees the first but then finds -webkit and ignores the standard.
But it's not quite the same, nevertheless. So I did some 'interpolation' and added some stops:
background-image: -webkit-radial-gradient(100px,
#1493a4 0%,
rgba(20,147,164,0.4) 40%,
rgba(20,147,164,0.2) 55%,
transparent 100%
);
It's still not the same but quite similar - at least I can live with it.
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 */
}
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.