Forums
View unanswered posts | View active topics It is currently Sun Aug 31, 2014 2:19 am



Reply to topic  [ 3 posts ] 
 WORKAROUND: IE Transparent gradients 
Author Message

Joined: Wed Apr 11, 2012 2:36 am
Posts: 1
Location: Warrenpoint, UK
Post WORKAROUND: IE Transparent gradients
As we all know IE browsers have their limitations, but our brains do not.
While driving my car I was trying to solve the issue and I came up with the following solution.

Problem: 20px heigh div with gradient from rgb(160,160,160) top to rgb(255,255,255) bottom with decreasing opacity.

Solution:

HTML
Code:
<!--[if lt IE 10]>
   <link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->

<div id="topGradient">
<!--[if lt IE 10]>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<![endif]-->
</div>


CSS
Code:
div#topGradient > div {
   background-color: rgb(160,160,160);
   width: 100%;
   height: 1px;
   filter: alpha(opacity=95);
}
div#topGradient > div+div {
   background-color: rgb(165,165,165);
   filter: alpha(opacity=90);
   
}
...
...
div#topGradient > div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div {
   background-color: rgb(255,255,255);
   filter: alpha(opacity=5);
}



This could all be written with Javascript of course and if IE would only support nth-child it would make things easier.

I hope it helps anyone and perhaps the PIE.htc can be updated to detect transparent gradients + height and render the different divs.

Btw, you don't want to zoom in with this solution :(

Cheers


Wed Apr 11, 2012 2:43 am
Profile WWW

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: WORKAROUND: IE Transparent gradients
Oh my gawd that's just about the ugliest hack I've ever seen! Congrats, that's hard to do. ;)

Seriously though, this is *not* the way to go about this. It doesn't work with border-radius. It doesn't work with gradients at angles. It doesn't work in IE6 (no '>' or '+' combinator support). It explodes the size of your HTML and CSS and the resulting DOM -- can you imagine doing this on an element 1000px tall?

The right way is to have PIE generate VML gradients with the proper stop opacity. This already works on the master branch for 2-stop gradients and doesn't have the above downsides.


Wed Apr 11, 2012 11:47 am
Profile

Joined: Sun Feb 05, 2012 11:26 pm
Posts: 3
Post Re: WORKAROUND: IE Transparent gradients
FYIO,

<!--[if lt IE 10]>

might not work because IE 10 dropped support for conditional comments (at least the previews avail to the public). See the bug reports on connect.microsoft.com.


Tue Apr 17, 2012 2:13 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Google [Bot], Yahoo [Bot] and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.