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
Related
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/
im trying to get this gradient to work in Firefox
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,transparent),color-stop(50%,transparent),color-stop(50%,$panda), color-stop(100%,$panda)); /* Chrome,Safari4+ */
I've tried with this, but no luck ?
background: linear-gradient(to bottom, #fff 0, #fff 50%, $panda 100%);
Depending on your version of Firefox, you may have to use the prefix -moz when using background linear-gradients.
Here's a general example:
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
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); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
The Mozilla documentation would have more examples on how to render these gradients in Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Also, refer to a nice handy resource here that I generally use: http://css3please.com/
You can try these:
background: -moz-linear-gradient($panda, transparent);
background-image: linear-gradient(to bottom, #FFF 0, #fff 50%, $panda 100%);
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.
I used css3please to generate a top-to-bottom linear gradient rule that would work across all browsers that support this style and it gave me:
.box_gradient {
background-color: #75A319;
background-image: -webkit-gradient(linear, left top, left bottom, from(#75A319), to(#9FCC1D)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #75A319, #9FCC1D); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #75A319, #9FCC1D); /* FF3.6 */
background-image: -ms-linear-gradient(top, #75A319, #9FCC1D); /* IE10 */
background-image: -o-linear-gradient(top, #75A319, #9FCC1D); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #75A319, #9FCC1D);
}
I'm a little suspicious of the last rule in this class:
background-image: linear-gradient(to bottom, #75A319, #9FCC1D);
Intuitively, one would expect:
background-image: linear-gradient(top bottom, #75A319, #9FCC1D);
Can someone confirm or allay my suspicions?
MDN explains the linear-gradient property here: https://developer.mozilla.org/en/CSS/linear-gradient
What you got from css3please is correct. to bottom specifies the angle. In this case, the angle is 180deg.
Is there a way to create a color gradient in CSS without using an image file?
I am trying to give a DIV a background with a color gradient so that it looks glossy.
Safari (Webkit) supports it:
http://webkit.org/blog/175/introducing-css-gradients/
Firefox 3.6+ supports it:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
W3 spec defines support for it:
http://dev.w3.org/csswg/css3-images/#gradients-
And you can use Modernizr to detect support and fall back on an image:
http://www.modernizr.com/docs/#cssgradients
Try this if you are using or can use PHP
http://snipplr.com/view/26070/multicolor-gradient-generator/
http://www.designdetector.com/2005/09/css-gradients-demo.php
See javascript solutions here
jQuery gradient plugin?
http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm
Some gradient image generator
http://www.roundedcornr.com/
http://gradient-maker.com/
http://www.grsites.com/generate/group/4000/
http://tools.dynamicdrive.com/gradient/
http://www.allcrunchy.com/Web_Stuff/Gradient_Generator/
71 Gradient Resources for Web Design
http://vandelaydesign.com/blog/tools/gradient-resources/
Sure Is (using color: Royal Blue, Hex Code: #002366 as an example (example taken from: http://www.99colors.net/name/royal-blue):
<div class="gradient">[Your DIV text and what not]</div>
/* CSS Background Gradient */
.gradient
{
background-color: #628AD9;
/* For WebKit (Safari, Chrome, etc) */
background: #628AD9 -webkit-gradient(linear, left top, left bottom, from(#001640), to(#628AD9)) no-repeat;
/* Mozilla,Firefox/Gecko */
background: #628AD9 -moz-linear-gradient(top, #001640, #628AD9) no-repeat;
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#628AD9) no-repeat;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#001640)" no-repeat;
}
Webkit browsers support pure-CSS gradients like this (see this example in Safari or Chrome) - but practically speaking for a cross-browser implementation you'll need to use images.
Go to http://www.colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D
You will see it generates the following code for the displayed glossy gradient there. You can change the gradient and copy the new code.
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */