Opacity relative to multiple ancestors

A VERY powerful addition to CSS3 (that doesn't conflict with the current method)
The ability to specify the opacity of an item individually to each of
its ancestor tags.  Say you have a list item inside an untitled list,
nested in a div tag (which is the direct descendant of the body).
Assume they all have content or solid backgrounds.

li { opacity:           }           result
     .5;                                li is half transparent to ul
     .5 .5;                            li is half transparent to ul,
plus half transparent to div (you cannot see any contents of li)
     .5 .25;                          li is half transparent to ul,
plus a quarter transparent to div

I believe it best to add the transparencies, because it allows for the
most flexibility and control.  However, there is an additional value
called "auto" to allow an opacity to that layer to be overridden if it
is specified elsewhere (of course, default is 1.0)
Now there's three options if an object tries to lend more than its full opacity:

Clip transparencies from the farthest ancestors (default)       far
Clip transparencies from the nearest ancestors                    near
scale opacities up proportionally                                         all

example:
li { opacity:      opacity-clip:   }      result
   .5 .25 .5;        far;                      li is 1/2 transparent
to ul, 1/4 to div, and 1/4 to body
   .5 .25 .5;        near;                   li is 1/4 transparent to
ul, 1/4 to div, and 1/2 to body
   .5 .25 .5;        all;                      li is 2/5 transparent
to ul, 1/5 to div, and 2/5 to body



This would be an addition to CSS3 Color Module section 3.2
http://www.w3.org/TR/css3-iccprof#transparency


-- 
~ Marshal Horn
http://sotabot.com webmaster since May 6th, 2008

Received on Wednesday, 16 July 2008 05:54:20 UTC