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.
Related
Hi guys i am making a website for my college project and i am not very good at using Dreamweaver CS6. I made my designs in photoshop and i am struggling to use my gradient background in my website. I have tried a couple of times to get it to work but it either repeats a lot of times or it fills up as certain amount of the page but cuts off. Any help would be appreciated thank you in advance.
Here is the CSS code
html body
{
background: linear-gradient(to top, #48E7A2 0%, #86C4ED 100%);
background-size:cover;
}
You can copy this code. From http://www.colorzilla.com/gradient-editor/
You should use it on the html{} not on the body{}
and add height:100%;
html {
height: 100%;
background: #48e7a2; /* Old browsers */
background: -moz-linear-gradient(top, #48e7a2 0%, #86c4ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#48e7a2), color-stop(100%,#86c4ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #48e7a2 0%,#86c4ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #48e7a2 0%,#86c4ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #48e7a2 0%,#86c4ed 100%); /* IE10+ */
background: linear-gradient(to bottom, #48e7a2 0%,#86c4ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48e7a2', endColorstr='#86c4ed',GradientType=0 ); /* IE6-9 */
}
DEMO
Most of the gradients I've seen are either vertical or horizontal. Is it possible to have a diagonal gradient using css? I would like to have a gradient that starts out dark in one corner and becomes lighter in the opposite corner.
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
http://jsfiddle.net/jrc72/show
Yes. http://www.colorzilla.com/gradient-editor/ has option to pick diagonal, see orientation.
See this demo http://jsfiddle.net/FQSdb/
and also check out http://www.colorzilla.com/gradient-editor/ for various orientation options
I am experiencing a somewhat weird bug on a website I am building.
Using Chrome/Firefox/Safari/IE10 it works fine. However, using IE9 it turns into blue! What is wrong?
I suspect this code is messing it up (#colorOne, #colorTwo is replaced by the actual colors):
.gradient (#colorOne, #colorTwo) {
background: #colorOne; /* Old browsers */
background: -moz-linear-gradient(top, #colorOne 0%, #colorTwo 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#colorOne), color-stop(100%,#colorTwo)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #colorOne 0%,#colorTwo 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #colorOne 0%,#colorTwo 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #colorOne 0%,#colorTwo 100%); /* IE10+ */
background: linear-gradient(to bottom, #colorOne 0%,#colorTwo 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#colorOne', endColorstr='#colorTwo',GradientType=0 ); /* IE6-9 */
}
You have a blue Microsoft filter gradient in your CSS on the #top element and other elements within your site. But since you're specifically asking about the header, just remove:
#top {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#colorOne', endColorstr='#colorThree', GradientType=1);
/* Remove this from any other element you wish to be green */
}
The only difference is a gradient only interpreted by IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#colorOne', endColorstr='#colorThree', GradientType=1
Simply remove it.
I used a css3 generator to create a gradient background.
It works on a static html page I built.
When I run my aspx there is no backgruond, though firebug shows the rule, with no conflicts, and even displays the gradient when I hover on the rule in firebug.
I fiddled it - doesn't work there either.
Here's the code:
body {
background: #a0d3ff; /* Old browsers */
background: -moz-linear-gradient(top, #a0d3ff 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0d3ff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a0d3ff 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a0d3ff 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a0d3ff 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #a0d3ff 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d3ff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
How can I fix it?
I am trying to add a gradient to a submit button in IE9 using the vendor specific CSS rule:
background: -ms-linear-gradient(#6671E8,#434991);
But for some reason this doesn't work. Is it something I'm doing wrong or is IE9 screwing things up again (or a combination of both)?
Try setting filter to none:
input[type="submit"] { filter: none; }
I haven't confirmed this, but I read it on Colorzilla's gradient generator:
http://www.colorzilla.com/gradient-editor/
Use CSS3 PIE and set -pie-background:
-pie-background: linear-gradient(#6671E8, #434991);
Try this:
background: #6671e8; /* Old browsers */
background: -moz-linear-gradient(top, #6671e8 1%, #434991 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#6671e8), color-stop(100%,#434991)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6671e8 1%,#434991 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6671e8 1%,#434991 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6671e8 1%,#434991 100%); /* IE10+ */
background: linear-gradient(top, #6671e8 1%,#434991 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6671e8', endColorstr='#434991',GradientType=0 ); /* IE6-9 */