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?
Related
I'm applying a linear background gradient to the <html> tag but in Firefox it's not very smooth, ie you can see lines: See this image:
In chrome it's much smoother. My CSS code is as follows:
html{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3c352e+0,121212+100 */
background: #3c352e; /* Old browsers */
background: -moz-linear-gradient(top, #3c352e 0%, #121212 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c352e), color-stop(100%,#121212)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3c352e 0%,#121212 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3c352e 0%,#121212 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3c352e 0%,#121212 100%); /* IE10+ */
background: linear-gradient(to bottom, #3c352e 0%,#121212 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c352e', endColorstr='#121212',GradientType=0 ); /* IE6-9 */
height:100vh;
}
Is there a way to smoothen this out?
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/
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
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 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 */