I am trying to use a gradient background in a column using colgroup. This works in all new browsers except for IE10.
This is my style code:
background: linear-gradient(to bottom, #ffffff 0%,#ebebeb 100%);
The gradient does work on block elements like div.
Is this a bug? Is there a way to fix this?
Related
I am trying to achieve the following design with background: linear-gradient I am able to get the left side but unable to get a dual linear-gradient rule to work in order to style bottom sides
background: linear-gradient(4deg, #000 5%, transparent 5%), linear-gradient(-4deg, #000 5%, transparent 5%); this is being applied to a simple div.
The reason for using this CSS rule is because IE does not support clip-path and polygon
Here's a link to my jsfiddle.
http://jsfiddle.net/inthenameofmusik/ddto077m/5/
The gradient restarts over and over in every box or element it seems. I'm not sure what's wrong with my CSS. Any help appreciated.
body {
background: linear-gradient(#1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* W3C */
}
I'm sure this is a simple fix, sorry for the CSS beginner-ness of this question.
You need to add html, body {height:100%;} to your style to force the browser to render the html parent tag at full height. Currently it's rendering only about 100px tall and the body background is repeating.
See this update fiddle for example.
I have a linear gradient as background, which works fine in Firefox, Opera classic etc. but jumps in 10px strips in Chromium (and also on Android stock browser). You can see there is no smooth gradient but 2 stripes instead.
My problem is also that I want a sharp cut (blue/white) but because of the 10px strips the cut jumps in 10px steps instead of 1px. I have the blue box here which should be aligned with the gradient but doesn't because of these 10px steps.
background: -webkit-gradient(linear, left top, right top, color-stop(0px,#247), color-stop(800px,#247), color-stop(800px,#fff), color-stop(820px,#fff), color-stop(820px,#247), color-stop(1000px,#247)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #247 0px,#247 800px,#fff 800px,#fff 820px,#247 820px,#247 1000px); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to right, #247 0px, #247 800px, #fff 800px, #fff 820px,#247 820px, #247 1000px); /* W3C */
I'm also using all other prefixed versions (-moz, -o, -ms).
EDIT: Ok, I should have added a demo to begin with, here it is: Codepen DEMO. The left blue block should be exactly 1000px, as wide as the control block below. And it is in Firefox and Opera Classic, but not in Chrome and Chromium.
It is an "optimisation feature" of chrome - see this SO question for more info. As of Chrome 35 you cannot rely on the width of columns created by gradient colour stops.
See this pen for a cool animated demonstration and links to bug (which are all in the other SO question too).
why dont you just use a gradient generator ?
http://gradients.glrzad.com/
http://www.colorzilla.com/gradient-editor/
even from microsoft http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/
I'm using following CSS to give gradient effect to the backGround but in IE it doesn't work. how can i make it work in IE8?
background: -moz-linear-gradient(bottom, #000000, #829a90);
background: -webkit-gradient(linear, left bottom, left top, from(#000000),to(#829a90) );
Tested on IE8 and its working:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
endColorstr='#829a90');
Also there are some limitations in giving gradient effect in IE because it doesn't supports color-stop and radial gradient. Also it's not guaranteed that all the browsers will support gradients thats why you shouldn't rely on gradient.
You sent code border gradients which is running in mozilla. But it is not working in webkit browser. Can you tell me the code that is runnable in webkit browser for border gradients?
Gradients for border images are currently not working correctly in -webkit. In fact, only basic border-image support via the border-image shortcut syntax is working in Webkit browsers. You will need to hack together using nested divs.
You might consider using a parent div with a padding of the width you want the border to have and then just set the parent div's background to:
-webkit-gradient(linear, left top, left bottom, from(white), to(black));
You don't have to do that:
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
Will do the job for you. Check out http://jsfiddle.net/MWaTw/ for more examples