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.
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
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?
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
Let's say the height of the div is 34px and the width is 480px. The div should look like this:
and I don't want it to actually use an image, just CSS. Is it possible?
It is with CSS3. There's even a handy gradient generator which takes the guesswork out of it. Of course, this is completely unsupported in IE8 and under.
Edit
For the sake of completeness, as sluukkonen mentioned, IE does support gradients in CSS using the filter filter:progid:DXImageTransform.Microsoft.Gradient.
It is possible with CSS3;
Example: (black and grey)
mydiv
{
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.15, rgb(189,189,189)),
color-stop(0.58, rgb(0,0,0)),
color-stop(0.79, rgb(0,0,0))
)
-moz-linear-gradient(
center bottom,
rgb(189,189,189) 15%,
rgb(0,0,0) 58%,
rgb(0,0,0) 79%
)
}
But this only works in Mozilla and webkit browsers, IE8 and under will ignore this.
Hope it helps :)
There are ways to do this with -webkit-gradient and -moz-linear-gradient 'functions' as values of background-image. These use different syntax but will be standardised if the gradient spec makes it into CSS 3's final release.
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);