Internet Explorer (IE) Background Gradient + Transparency CSS Fix
Here we comes with another IE fix, we all hate IE so i’d be quick and direct.
To begin with i will remind you what IE <=9 can actually support in the same CSS selector:
- Gradient + Border Radius = Gradient but no Border Radius
- Border Radius + Transparency = All fine
- Gradient + Transparency = Here we comes!
To achieve Gradient + Trasparency in a single line the first thing to do is to study a bit of internet explorer “Filter” property shits, but it’s boring, so i came up with a quick and easy fix:
- Generate your gradient with one of the many CSS Gradient Generator out there, i usually go to Colorzilla site and use their gradient editor (link here)
- The result is of course our beloved gradients, except for the one who fails while applying opacity:
/* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#7dbce0ee',GradientType=1 );
- Create a tipical iefix.css and import it in your <head></head> using
<!--[if IE]> <link href='iefix.css' rel="stylesheet" type="text/css" media="screen" /> <![endif]-->
- Fill it with love editing the code obtained from the Gradient Generator with
/* IE6-9 */ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#527698', endColorstr='#bf839db4', GradientType=1) progid: alpha(opacity = 90);
As you can see i simply put the prog:id alpha(opacity = 90) after the gradient code.
Nothing big, anyway some CSS sintax checker will give you error (like netbeans but oh well nothing new), expecially if you are a LESS addicted like me, you’ll find that winLESS will get angry at you if you use that fix (that’s the reason because i used an external fix file instead of putting everything together).
Anyway the fix works, i didn’t found good documentions over google, i bet many people have already figured this out but it’s worth it spreading it a bit.
P.S.: You all probably already know that you could achieve other browser filter opacity just replacing rgb(X,X,X) from the gradient code with a rgba(X,X,X,0.50). Remember that other browser opacity goes from 0.1 to 1.0, instead IE one goes from 0 to 100.
No comments yet.