Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

add transparency support of elements via css3-container opacity #224

Closed
clottes opened this Issue · 2 comments

2 participants

@clottes

I've had instances where I needed to have the elements that css3pie renders to be transparent (i.e. the entire gradient, rounded corners, drop shadows, etc...)
As we know the drop-shadow creates an entire black region behind the entire element (thus can't just use transparent colors).
I found an easy solution, just get the previous element... make sure it's a element and match it's opacity (filter: alpha(opacity=xx)) to that of the element it's rendering.
I had to do this quickly, so I just did it manually, but it seems it should be easy to code that into css3pie, add filter/opacity as a value to watch on the element, and to match it's css3-container with. Works perfectly by the way!!! (can have full transparency on any element just as any other browser if done in this way)

@clottes

Alright... looks like it has problems sometimes in ie<=8, but works for ie9...
Maybe we could conditionally support this for ie9 though, optionally what I did was remove the css3 features in ie8 if a block was set to have transparency, and add it back once opacity was again set to 1. This solution works fairly well. Transparency is a highly used and sought after feature for high-end pages, and can be used in so many and multiple ways. It would be great if it were integrated into PIE.

@lojjic
Owner

IE9 shouldn't have this problem to begin with, because PIE does not insert any extra elements. All that PIE does in IE9 is modify the background of the original element, so the normal opacity property should apply just fine.

As for IE8 and below, this is already tracked by issue #46 -- but I want to mention that your approach isn't actually an accurate fix. Since PIE rendering involves two elements layered on top of one another -- the original element on top of PIE's rendering element -- your solution results in one faded element on top of another faded element. This is not the same thing as fading a single element. To get an accurate rendering of opacity, you would first have to composite the two elements together, and then apply opacity to the resulting composited pixels. I don't know of a way to do this with the tech that IE provides.

I'm closing this ticket as duplicate of issue #46 -- let's have any additional discussion there.

@lojjic lojjic closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.