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
Related
BUG! Left here in hope that it will attract attention and perhaps a fix.
The problem is that chrome, makes(i have checked!) the first half of the gradient smaller than the second one. My code is:
background: linear-gradient(to left, #ffffff 50%, #f5f5f5 50%) fixed;
Also tried:
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3236), color-stop(50%,#ff3236), color-stop(50%,#000000), color-stop(100%,#000000));
background: linear-gradient(to left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 50%,#ffffff 100%);
Edit/Update: It is indeed a bug - updates are for clarity (top 2 blocks are divs, each 50% width, of screen - bottom is split with gradient):
1) Visual representation of the bug:
2) Thanx to #elstgav for a putting up the a Codepen Test
As of now (2016-11-02), This issue ssems to be fixed, I just tested these pens :
http://codepen.io/elstgav/pen/guotz
http://codepen.io/gliesche/pen/GoWMVO
in Chrome Version 54.0.2840.71 m,
and they all work.
However, Chrome still seems to have some issues with scaling gradient backgrounds when they are repeated:
SO link: Chrome not updateing background-size gradient properly on resize
Chrome BT: https://bugs.chromium.org/p/chromium/issues/detail?id=604875
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 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?
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.
I asked a question CSS Gradients with little content some time back
I came up with a possible fix http://jsfiddle.net/aruUS/2/
html, body { min-height: 100% }
body {
background: -moz-linear-gradient(top, blue, red 200px);
background: -webkit-gradient(linear, 0 0, 0 200px, from(blue), to(red));
}
only the Firefox part works, it appears webkit only supports percentages for color stops? Anyway to make this work?
Simply remove the px from 200px. Pixel values are unitless in Webkit's gradient syntax. I.e.
background: -webkit-gradient(linear, 0 0, 0 200, from(blue), to(red));
See the Surfin' Safari blog's Introducing CSS Gradients:
A point is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.
Numbers don't have a unit, as opposed to lengths, which do, according to the CSS specification.
try this:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.3, rgb(255,0,0)),
color-stop(0.47, rgb(255,0,0)),
color-stop(1, rgb(0,0,254))
);
More information for -webkit-gradient visit: http://webkit.org/blog/175/introducing-css-gradients/
Live example: http://jsfiddle.net/aruUS/3/
Tool to help you more: http://gradients.glrzad.com/