I tried to replicate a starburst effect using CSS3 gradients. After much fiddling, I figured it out, only to test it in Safari and have it go nuts. It's like Safari is using 180deg where Chrome would render 270deg or something.
Here's the code: http://codepen.io/syren/pen/Ahkrv
Any input you have would be very helpful. Thanks in advance!
Update: I noticed that on this tutorial: http://camenischcreative.com/blog/2011-04-26, the same bug occurred in Chrome, but worked in Safari. I noticed that they used -90deg to 90deg, so I rewrote my -webkit-gradient- prefixed gradients in that range and now it works. And since Chrome uses linear-gradient, it uses the 180deg to 360deg gradients and it works.
I left the problematic prefixed gradient commented out, to see the problem, uncomment it.
So my problem is solved, but I'm still really curious if anyone else has encountered this problem and why do you think it is?
The reason is in the "overlay" you did not included all vendor specific gradients properties.
Missing vendor-prefixed CSS gradients for Firefox 3.6+, Old Webkit (Safari 4+, Chrome), Opera 11.1+.
If you want to support those browser too, you have to do something like this:
/* FF3.6+ */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
/* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
/* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
/* Opera 11.10+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
/* IE10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
/* W3C */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
You are only using webkit-linear-gradient and linear-gradinet.
Related
I am trying to generate navigation menu gradients dynamically using php using CSS. Safari is way too slow (takes about 20s to load page) on safari, but works fine on other browsers like firefox and chrome.
Here is the code responsible for this:
navi .pure-menu-horizontal {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,#8fc6f3 0%, #e6e9e6 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #8fc6f3 0%,#e6e9e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8fc6f3 0%,#e6e9e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8fc6f3 0%,#e6e9e6 100%); /* IE10+ */
background: linear-gradient(to bottom, #8fc6f3 0%,#e6e9e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
What exactly is causing this problem?
UPDATE: Seems this line is causing the whole issue. I tried removing this last line
background: linear-gradient(to bottom, #8fc6f3 0%,#e6e9e6 100%); /* W3C */
it works fine, but gradient not rendered in other browsers, works fine in safari.
i tried repeating-linear-gradient although it works fine but intermittently safari too slow loading..
background: repeating-linear-gradient(to bottom, #8fc6f3 0%,#e6e9e6 100%);
Please can anyone help?
I have created my own navbar and would like to set up a simple gradient background color for it.
So far I have the following which works fine for me in newer browsers but I am not sure what I have to add here to cover IE8 and IE9 as well (I am not interested in older versions).
Also, I came across filter: progid... when searching for this.
Can someone tell me if this needs to be added here as well to cover common browsers or if I need to add or change anything else for that ?
I would like to support newer versions of Chrome, Firefox, Opera and Safari + IE (incl. IE8 and IE9).
My CSS:
background: -moz-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Firefox */
background: -ms-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* IE10 */
background: -o-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Opera */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #02b0fd), color-stop(1, #028dca)); /* Webkit (Safari) */
background: -webkit-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Webkit (Chrome) */
background: linear-gradient(top, #02b0fd 0%, #028dca 100%);
Many thanks in advance,
Mike
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0002b0fd', endColorstr='#028dca',GradientType=0 );
will give you IE6-9.
Using: http://www.colorzilla.com/gradient-editor/
I have a problem in css gradient on safari 5.0.2 . the css code is working on safari 5.1 but in 5.0, its not working. Why is this happening? Any Idea?
Here is my code:
background: -webkit-linear-gradient(top, #D82102, #B90602);
background: -moz-linear-gradient(top, #D82102, #B90602);
background: -ms-linear-gradient(top, #D82102, #B90602);
background: -o-linear-gradient(top, #D82102, #B90602);
background: linear-gradient(to bottom, #D82102, #B90602);
Did I forget something? please help me. It stuck me.
Try adding:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
The reason is you did not included all vendor specific gradients properties.
Missing vendor-prefixed CSS gradients for Firefox 3.6+, Old Webkit (Safari 4+, Chrome), Opera 11.1+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
You are only using webkit-linear-gradient and linear-gradinet.
To get a linear gradient to work in all supporting browsers
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(black, white); /* the standard */
Safari 5.0 does not support CSS gradients. Only 5.1 and later support it. You can check it out here on w3 schools-
https://www.w3schools.com/css/css3_gradients.asp
On the other hand the apple-safari website page says that gradients are supported in versions 4.0 and above. It also mentions how to use them-
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html#//apple_ref/doc/uid/TP40007955-SW25
I'm trying to use a radial gradient background for my website, it displays alright in Firefox but it displays differently in Chrome and IE. Anyway below is how it looks in Firefox (what I want it too look like) and how it looks for IE and Chrome. I used the Ultimate CSS gradient generator to try and maintain cross-browser compatibility. This is the code I'm using for the gradient.
background: #0e0e0e; /* No gradient support */
background: -moz-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(234,211,0,0.6)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ead300', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Below is the result in different browsers:
Firefox
Chrome and IE
Does anyone know of any solutions to make it look similar in Chrome and IE?
Just a thought: can you just change the -moz first color value's color stop position to make it stronger yellow at the center?
background: -moz-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 25%, rgba(255,255,255,0) 100%); /* FF3.6+ */
This is probably due to the way each browser renders the gradient you're using.
I think giving different gradient rules for each vendor prefix would do it.
I tred making this work using this reference. Yet it doesn't seem to be doing the trick. Did I miss something? I just need another set of eyes on this. Thank you.
The background image shows, but not the gradient. Here is a fiddle to show you what I mean.
What am I doing wrong?
background: #23458E;
background-image: url('/static/images/grey.png'); /* fallback */
background-image: url('/static/images/grey.png'), -webkit-gradient(linear, left top, left bottom, from(#23458E), to(#2661A8)); /* Saf4+, Chrome */
background-image: url('/static/images/grey.png'), -webkit-linear-gradient(top, #23458E, #2661A8); /* Chrome 10+, Saf5.1+ */
background-image: url('/static/images/grey.png'), -moz-linear-gradient(top, #23458E, #2661A8); /* FF3.6+ */
background-image: url('/static/images/grey.png'), -ms-linear-gradient(top, #23458E, #2661A8); /* IE10 */
background-image: url('/static/images/grey.png'), -o-linear-gradient(top, #23458E, #2661A8); /* Opera 11.10+ */
background-image: url('/static/images/grey.png'), linear-gradient(top, #23458E, #2661A8); /* W3C */
The image is completely opaque, so since it's specified before the gradient, it covers the gradient.
Both your image and the gradient are completely opaque, so it's not clear what exactly you're trying to accomplish with both of them. An explanation of your problem is the best I can offer at the moment.