search

lojjic / PIE

A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties
http://css3pie.com
Other
2.79k stars 235 forks source link

Implement RGBA for linear-gradient colors #7

Open lojjic opened 14 years ago

lojjic commented 14 years ago

While RGBA colors are currently accepted when parsing linear-gradient values, they are always rendered with 100% opacity. This is because VML does not support per-stop opacity.

VML does allow a single 'opacity' attribute on the fill, however it appears that for linear gradients this is always applied so that the color at the start of the shape (not necessarily the first color-stop) is fully opaque and the color at the end of the shape has the specified opacity. The MSDN documents talk about an opacity2 attribute but it appears this only works in MSOffice.

To make per-stop opacity work will take some serious work, if it's even possible. The only thing I've been able to come up with is to draw each color-stop segment as a separate shape element; each shape would have the 'opacity' fill attribute and/or an alpha filter applied to achieve the correct opacity on each of its ends. These shapes would then be stacked next to each other to build the full shape. This could get very tricky in certain situations, such as when one of the stops extends through a rounded corner.

Other ideas are very welcome.

We could probably hit a good percentage of the use cases if we limited RGBA rendering to only gradients with 2 colors in a vertical or horizontal orientation where the stops are at the edges of the box.

lojjic commented 12 years ago

Commit 7e028235f2c9b5f2aa7baa910acc11ce9058b96f adds preliminary support for gradient opacity. Currently it is limited to gradients with only two stops; more complete support will hopefully be coming soon.

dstephens commented 12 years ago

Even support for 2 stops is a huge improvement. When will this change be integrated into pie.js and released?

asgh commented 11 years ago

I tried this out, and it mostly works, but it ignores the position of the stop, it always start at the edge of the background. Is this known? Because I don't see any mention of it in the docs. (Just background-position which is something else).

lojjic commented 11 years ago

@asgh You're right, it only works from edge to edge. I should have been more clear about that -- internally when you set a stop position that's actually the same as adding an additional stop. For example linear-gradient(red 25%, blue 75%) is the same as linear-gradient(red 0%, red 25%, blue 75%, blue 100%) so it doesn't really count as two stops unfortunately.