That css is compatible with Firefox, but it isnt with google chrome. In Chrome is transparent!
.hubsimular{
background: url("../img/hub/controls.png") no-repeat top right, -moz-linear-gradient(rgba(208, 208, 208, 1.0), rgba(255, 255, 255, 0.9) 50%, rgba(208, 208, 208, 1.0));
}
The background image is semitransparent, and the color degraded is underneath of the background image.
In this image can see the problem:
http://i.stack.imgur.com/oPyCi.jpg
It's because you're using only -moz-linear-gradient. You need to use -webkit-linear-gradient as well
hubsimular{
background: url("../img/hub/controls.png") no-repeat top right, -moz-linear-gradient(rgba(208, 208, 208, 1.0),-webkit-linear-gradient(rgba(208, 208, 208, 1.0),linear-gradient(rgba(208, 208, 208, 1.0),rgba(255, 255, 255, 0.9) 50%, rgba(208, 208, 208, 1.0)); }
You should have a fall back option and webkit option in addition to moz
Add
-webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
Related
This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 4 months ago.
I generate my pages background using a radial/linear gradient, specifically:
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
When viewing pages larger than 1920x1080 and scrolling on the y axis I get a line between the original gradient and the continuation that looks like:
I want to get rid of this line somehow so that when a user scrolls down the page, everything appears seamless.
How can I do this in CSS?
That seems to work as suggested by Temani Afif 15 mins ago
html {min-height: 100%}
html {
min-height: 100%;
}
body {
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
}
<body>
</body>
I need to write a CSS class for the grid lines of a "canvas" (div element). The user can change the background color of the "canvas", so I need the lines to be visible for every color. At the moment I have the following CSS code:
.grid.grid-linear {
background-image: -webkit-linear-gradient(to right, rgba(78, 78, 78, .7) 2px, transparent 2px), -webkit-linear-gradient(to bottom, rgba(78, 78, 78, .7) 1px, transparent 2px);
background-image: -moz-linear-gradient(to right, rgba(78, 78, 78, .7) 2px, transparent 2px), -moz-linear-gradient(to bottom, rgba(78, 78, 78, .7) 1px, transparent 2px);
background-image: -ms-linear-gradient(to right, rgba(78, 78, 78, .7) 2px, transparent 2px), -ms-linear-gradient(to bottom, rgba(78, 78, 78, .7) 1px, transparent 2px);
background-image: linear-gradient(to right, rgba(78, 78, 78, .7) 2px, transparent 2px), linear-gradient(to bottom, rgba(78, 78, 78, .7) 1px, transparent 2px);
}
The issue is that when the user selects a background color of: rgb(78,78,78) the lines will no longer be visible.
How can I create the grid lines using just CSS or Sass to conform to any background color the user selects?
Note: The user changes the background color property of the grid (div element) dynamically, so if I were to implement some logic to the Sass file I need to have access to properties of other elements in the DOM. I don't know if doing this in just Sass is possible.
body background is defined in inline css as
body {
background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}
In real web sites latest Internet Explorer shows horizontal lines in background.
In IE developer tools I turned all other styles in body off, tried 2-color gradient, linear gradient and other colors, but problem persists.
How to force IE to show background without horizontal lines ?
Chrome shows proper background. Also Internet explorer shows proper background if only this style is used. Page
<html>
<head>
<style type="text/css">
body {
background: radial-gradient( #EAC39F, #CB690C);
}
</style>
</head><html><body></body></html>
is shown properly. If there are more elements in page, horizontal lines appear.
How to remove those lines in Internet Explorer ?
jquery and jquery-UI are used in page.
Since IE does not apply height to body, either you apply a fixed height to body or you apply a 100% heightto html tag in your CSS,
and if you don't need the background to repeat, apply, background-repeat:no-repeat.
Also If you are looking for a cross-browser support then you should use the vendors browsers.
Here is a snippet working in IE10+:
html {
height: 100%
}
body {
background: rgba(234, 195, 159, 1);
/* Old Browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(234, 195, 159, 1)), color-stop(100%, rgba(203, 104, 12, 1)));
/* Chrome, Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* Opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* IE 10+ */
background: radial-gradient(ellipse at center, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eac39f', endColorstr='#cb680c', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
background-repeat: no-repeat
}
The issue appears to stem from the fact that IE is not applying a height to the body element. As such the background gets repeated and you see the lines.
By applying
body {
background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}
A similar effect can be seen at http://jsfiddle.net/xpz2tgp9/ in Chrome, IE, etc.
To resolve your issue, apply a specific height to the body element or add a clearing div that will force the body to have height value.
html,body
{
height: 100%;
margin: 0;
padding: 0;
}
See - http://jsfiddle.net/xpz2tgp9/1/
I'm just wondering why in IE that the button is grey and then when you hover over the button goes blue, it should be blue and then when hover over it goes darker blue.
I've got it working in other browsers but I can't figure out the code for IE.
Thanks in advance.
Here is the CSS:
#mc_embed_signup .button {
background-image: linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -o-linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -moz-linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -webkit-linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -ms-linear-gradient(center top , rgb(95, 176, 244), rgb(70, 130, 180));
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgb(95, 176, 244)),
color-stop(1, rgb(70, 130, 180))
);}
And here is the HTML for the button:
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
It's actually live in the footer of http://www.housebuyfast.co.uk. It's the subscribe button under "Join Our Mailing List Now".
IE9 and earlier does not support standard CSS gradients.
IE10 does support them, and your code should work fine in IE10 (unless it's in compatibility mode).
If you need to use gradients in IE9 or earlier, you have a few options:
Use IE's proprietary -ms-filter style. Something like this:
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
Use a polyfill script like CSS3Pie. This will allow the standard CSS gradients to work in older IE versions.
It is because the version of IE that you are using does not support gradients.
More info at: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
Basically it isn't supported until IE10, but as other posters point out there are alternatives.
Use CSS3PIE for makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features http://css3pie.com/
Alright now i am trying to make a cool looking table with using CSS gradient feature which is supported by firefox,opera,chrome.
It looks great but it lags too much. When i scroll down the page it lags greatly. It is slow even at super fast computer so it is not related computer. I also tried with different browsers still lagging. When i disable gradient background color feature it returns normal.
So how can i fix this issue or are there any other way i can make cool looking table. thank you.
this is how does table look http://img202.imageshack.us/img202/4905/howlook.png
This is an example class i use for table tds
.ML0
{
color: #000000;
text-decoration: none;
background: rgb(229,229,229);
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(229,229,229)), color-stop(0.55, rgb(242,242,242)), color-stop(0.78, rgb(255,255,255)) );
background: -moz-linear-gradient( center bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
background: -o-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
background: -ms-linear-gradient( bottom, rgb(229,229,229) 9%, rgb(242,242,242) 55%, rgb(255,255,255) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}
This is a problem that browser vendors are the ones supposed to fix, not you. You're using CSS3 gradients normally.
I suggest you file bug reports with the respective vendors instead. If you need good scrolling performance, just put up with an alternative for now. Background images are great for this; you're not required to do everything with CSS.