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.
Related
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 can't for the life of me get this to work. My gradient and tile go together to the bottom of the page but when I scroll further they don't continue. I searched for the issue on here but couldn't find a solution and I'm not the best coder so.
The site can be seen here access code: 000 http://richlandgaming.qsandbox.com/
Thank you in advance!
body {
min-height: 100%;
color: #ffffff;
background: #242424;
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"); /* fallback */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -webkit-gradient(linear, left top, left bottom, from(#242424), to(#000000)); /* Saf4+, Chrome */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -webkit-linear-gradient(top, #242424, #000000); /* Chrome 10+, Saf5.1+ */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -moz-linear-gradient(top, #242424, #000000); /* FF3.6+ */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -ms-linear-gradient(top, #242424, #000000); /* IE10 */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), -o-linear-gradient(top, #242424, #000000); /* Opera 11.10+ */
background-image: url("/wp-content/uploads/2013/11/bg-tile.png"), linear-gradient(top, #242424, #000000); /* W3C */
}
Your html element has a fixed height set to 100% - removing that should fix your problem.
It's defined in your style.css at line 121.
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.
I am having some problems converting a linear gradient for viewing in Chrome. It would be a bonus to see this gradient for full cross-browser too if you're willing, I'm developing a theme and it would help tremendously.
Here's the Mozilla version here:
background:
-moz-linear-gradient(center bottom , #401746 0%, rgb(255, 255, 255) 250%) repeat scroll 0% 0% #6e2778;
Go to http://www.colorzilla.com/gradient-editor/, import gradient, this is what you get. I do wonder how that %250 stop location would be handled cross browser, though. It might not strictly be valid across browsers.
background: #401746; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwMTc0NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #401746 0%, #ffffff 250%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#401746), color-stop(250%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #401746 0%,#ffffff 250%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #401746 0%,#ffffff 250%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #401746 0%,#ffffff 250%); /* IE10+ */
background: linear-gradient(to bottom, #401746 0%,#ffffff 250%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#401746', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
Edit: Nevermind about my color stop worries (see http://dev.w3.org/csswg/css3-images/, section 4.1.1. linear-gradient() syntax, second to last paragraph):
The gradient's color stops are typically placed between the starting point and ending point on the gradient line, but this isn't required - the gradient line extends infinitely in both directions. The starting point and ending point are merely arbitrary location markers - the starting point defines where 0%, 0px, etc are located when specifying color-stops, and the ending point defines where 100% is located. Color-stops are allowed to have positions before 0% or after 100%.
Emphasis, my own.
I want to replace the following Mozilla-specific CSS rule:
background: -moz-linear-gradient(center top , #F5F5F5, #E4E4E4);
with an equivalent rule that uses the standard linear-gradient instead. In other words, how can I complete the following rule so that it has the same effect (in Firefox) as the rule above
background: linear-gradient /* what goes here? */
This is how I handle all gradients for all browsers, I hope this helps;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
You could also use some gradient generators if you are having some difficulties or just for speeding up the process.
Examples:
http://www.colorzilla.com/gradient-editor/
http://westciv.com/tools/gradients/
http://gradients.glrzad.com/
center is not part of the linear gradient specification. (I don't know why it's ignored rather than being a CSS error.) The most up-to-date syntax supported by Firefox is -moz-linear-gradient(to bottom, #F5F5F5, #E4E4E4); however as far as I know the specification hasn't reached CR status so this could still change.