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%);
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/
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 am looking for a way to make a linear-gradient from "nothing" (alpha) to a defined colour: #e6a015. I can't find it neither in google nor here, can someone tell me how to do this?
You can use rgba colour with alpha as zero
background-image: -ms-linear-gradient(top left, rgba(230,160,21,0) 0%, rgb(230,160,21) 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, rgba(230,160,21,0) 0%, rgb(230,160,21) 100%);
/* Opera */
background-image: -o-linear-gradient(top left, rgba(230,160,21,0) 0%, rgb(230,160,21) 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(230,160,21,0)), color-stop(1, rgb(230,160,21)));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, rgba(230,160,21,0) 0%,rgb(230,160,21) 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, rgba(230,160,21,0) 0%, rgb(230,160,21) 100%);
DEMO
Is it possible to add gradiency on hover? I want to avoid images and use pure css3.
I have a simple box with
backgroundc-color: blue whihc has an icon.
I want to add a gradient effect on mouse over.
How can i get that gradient glow effect as the screen grab?
I am trying to get this effect below:
You can do gradients in CSS, although the definitions can get a bit verbose. Here's a solid CSS3 gradient creator.
Then just add a :hover to your link.
.your-link:hover {
// gradient here
}
This is how I would do it:
.link:hover {
background-image: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 116, color-stop(1%, #57fdfe), color-stop(100%, #2c95dd));
background-image: -webkit-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -moz-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -ms-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -o-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: radial-gradient(farthest-side at center bottom, #57fdfe 1%, #2c95dd 100%);
}
Thats a complete example, you can just copy and paste and it should work :) enjoy!
Note that has your colours in there and its radial :)
Is this the kind of thing you are looking for?
Obviously use your own colors.
DEMO
This is the css:
.blah:hover {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0198E1), to(#00FFFF));
background-image: -webkit-linear-gradient(top, #0198E1, #00FFFF);
background-image: -moz-linear-gradient(top, #0198E1, #00FFFF);
background-image: -ms-linear-gradient(top, #0198E1, #00FFFF);
background-image: -o-linear-gradient(top, #0198E1, #00FFFF);
}
For best practices for css3, you can go to css3please.com. Just adding :hover to the class will give you what you need:
.box_gradient:hover {
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.50+ */
}
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.