How to Apply Linear Gradient for Ie8

Getting linear gradients to work on IE 8

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5EB9FF', endColorstr='#FFFFFF');

Note: The previous rule is a full rule. Do not use it in this way: background: filter: ....;!

See also: CSS3 cross browser linear gradient

IE 8. Gradient background+image

I found the answer to my question:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FFFFFF", endColorstr="#EFCA11",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gxt/images/my/eye.png"); 

Gradient support for IE 8 and below

The filter stuff is generally regarded as bad practice, and isn't valid CSS (so your stylesheet will fail validation tests)

it's possible to set a background image for the element in question, then IE will fallback to that image if it's a version that doesn't support gradients, the beauty of it is that browsers supporting gradients don't load the background image (well, usually) so performance isn't impacted negatively.

Personally, if I were you I'd go for the background image solution, it's a lot cleaner than the whole "filter" thing, and doesn't punish people not using Internet Explorer (yay!)

If you'd like more detail, see here:
http://css-tricks.com/css3-gradients/

CSS: How to set up gradient background cross browser (only missing IE8 and IE9)

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0002b0fd', endColorstr='#028dca',GradientType=0 );

will give you IE6-9.

Using: http://www.colorzilla.com/gradient-editor/

Can I create a CSS gradient background for td in IE8?

IE 8 does support an old, non-valid, Microsoft-specific CSS gradient syntax. It doesn't offer all the features of proper CSS gradients (e.g. you can't specify stop locations), so you won't be able to exactly match the gradient you've got.

See http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx

Here's a rough approximation of your gradient:

td {
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FE856B, endColorStr=#23AB11);
}


Related Topics



Leave a reply



Submit