I am working on a project for my customer currently, and as always i try to make cross browser consistency. I have built a drop down menu with CSS3 Gradients and added Opacity to it as well, everything looked great, until i have opened it in IE… i know that IE does not recognize any sophisticated or simple css attributes like opacity, so i started to look for a solution that will not include Javascript coding, only css. I have found a solution to make the gradient effect with IE but for some reason he didn’t want it to work side by side with opacity.

Finally i have came across a post on site named Scriptfx that have explained how it works together.

The working example can be seen here: http://class-a.co.il/

And here is the example of the code i have used to make it cross browser:

filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaffffff', endColorstr='#aa747474');   /* IE rule */
background: -moz-linear-gradient(top, #fff, #747474); /* FF rule */
background: -webkit-gradient(linear,center top,center bottom,from(#fff),to(#747474)); /* Webkit browsers (Safari, Chrome, etc...) rule */
opacity:0.75; /* every normal browser rule for opacity (except IE) */

At the code above please notice that IE uses an 8 digit hex color code, the reason is that the first two hexadecimal digits are indicating the opacity level from 00 as full opacity and ff means no opacity at all.

Note: i have tried to make it work with Alpha(opacity=75) rule for IE but when i added it after the gradient filter it worked awkward my :hover got stuck after hovering the first element.

I know some of you will say, “Who cares about IE…” and stuff like that, ill tell you the truth, i don’t care either. but in Israel still many people use IE (kill me i don’t know why) and it is very important for my client that it will work in IE exactly like it works in the other browsers.

Thank you for reading this post, and have a nice day.

Be Sociable, Share!

• 

4 Responses to CSS3 Gradients with opacity works with IE

Jeff says: September 2, 2010 at 12:37 am

Very useful.
Info not readily available.
Your blog was indexed and now it is easier to get for these who need it.
Thank you for sharing.

Jeff

Clint says: December 27, 2010 at 6:11 am

Very helpful indeed. I think you have the values for opacity reversed, however. 00 (hexidecimal black) is no opacity (maximum transparency), while ff (hex white) is full opacity.

K2Joom says: March 20, 2011 at 10:56 am

Just came across this post whilst researching opacity and gradient css combos.
Two points, one of the links points to a 404, out of your hands.
The other is that part of the text in this post is not wrapping and so hides under the right column.

Great guide, but not what I was looking for on this occasion, but book marked cos IE issues are bound to come up.

Thanks.

leonzinger says: March 21, 2011 at 4:21 pm

Hey Simon,

Thanks for the feedback.