CODEWITHSUNDEEP
cssweb
user1116377
user1116377

Reputation: 699

what is the replacement for filter: progid:DXImageTransform.Microsoft.gradient

I'm using the following in my CSS (CSS3) file in order to create a gradient in Internet Explorer: 

filter: progid:DXImageTransform.Microsoft.gradient

for example 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C4D5FB', endColorstr='#DAE6FB'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#C4D5FB), to(#DAE6FB)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #C4D5FB,  #DAE6FB); /* for firefox 3.6+ */

I have just read that it is deprecated since Internet Explorer 9 but still works. Is it safe to use it? is there a replacement for it?

according to: internet-explorer-9-gradients-with-rounded-corners

it is safe to use it:

Tools like the Ultimate CSS Gradient Generator generate the code needed for lovely CSS3 gradients with a fallback option for legacy Internet Explorer (using the gradient filter mentioned above).

thank you.

Upvotes: 2

Views: 12353

Answers (2)

Alverto
Alverto

Reputation: 49

You can use the inset for box-shadow to by pass the gradient. I had this problem and just could not get it to work. So I saw this article http://www.sitepoint.com/shadow-boxing-image-free-css3-glossy-buttons/. Worked great for me.

This is the code I used on my project. 

border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, .2), 0px 0px 3px rgba(0, 0, 0, .1), inset 0px 5px 12px #930, inset 0px 15px 2px rgba(240, 150, 69, .5),inset 0px 25px 25px #930;

Upvotes: 3

Ollie
Ollie

Reputation: 656

Try This site

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

Check the IE9 Support box. It will give you an SVG solution.

Upvotes: 1

Related Questions