W3C 'CSS3 module: Color' Working Draft dated 19th February 2002

Dear editors,

I'd like to make a proposal to the 'opacity'
[http://www.w3.org/TR/css3-color/#opacity]
property of the 'CSS3 module: Color' module.

I was fascinated by the idea of creating semi-transparent
effects in webpages after first seeing Eric A. Meyers'
'complexspiral demo' you'll certainly all know.
[http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html]
Eversince I'm playing around with CSS effects and styling.

When I was reading the CSS3 working drafts, this property
immediatly came to me as a good enhancement to cut down the
use of images even more by creating only one background and
overlaying it with a _real_ translucient background elements
instead of using workarounds like in the demo above or using
8bit-transparent PNGs, which are only supported within
Opera6+ and Mozilla properly so far (on PC). Pages would
need even less image data.

So I started to play with mozilla's '-moz-opacity' property,
which represents your current proposal for the forthcoming
CSS3 'opacity' property, as I read the following definition:
'The opacity property is applied across an entire element
including its outline, border and background if any. If the
element is a container element, then the effect is as if the
contents of the element were blended against the current
rendering composite using a mask where the value of each
pixel of the mask is <alphavalue>.'

And so I ended up having a navbar (or something similar)
e.g. floating somewhere half over other elements. E.g.
something like http://www.w3.org/Style/CSS/ (The layout does
not matter, since this is just to clearify the need for my
proposal)
The only flaw is, that 'opacity' also makes the text less
visible and it might become hard to read, if one wanted to
achive only some kind of tint for the background (like in
complexspiral).
Even since the value is not inherited, this could be
problematic as you can read in the next paragraph. The only
way I see to have the text in full opacity would be to place
another element of the same size over the transparent one
(not as a child, but with absolute positioning, eg.). But
this makes it harder again to have boxes growing with it's
content, and is IMHO not a very elegant way to achive this.

I also wonder, why there is an 'inherit' value for this
property. Your definition states that every subelement by
just being in a containing element should be treated by the
same 'mask' like the containing element when rendering the
containing element on screen.
If one element inherits it's parent transparency, this would
be a recursive process. E.g. having a <div> containing a <p>
and the <p> inherits it's parent <div>'s opacity of.. say
0.5. I understand the spec this way: the <p> is rendered
half transparent into the <div> then the <div> is rendered
hald-transparent into whatever it contains, making the <p>
about 0.25-transparent.

So now my proposal:

Instead of having one property to mask the whole element
(and if the element is a block-level element containing
others, all those sub-elements), I suggest introducing
properties for each nessesary type of elements:

  Name:        opacity-background
  Value:       <alphavalue> | inherit
  Initial:     1
  Applies to:  all elements
  Inherited:   no
  Percentages: N/A
  Media:       visual

  Name:        opacity-foreground
  Value:       <alphavalue> | inherit
  Initial:     1
  Applies to:  all elements
  Inherited:   no
  Percentages: N/A
  Media:       visual

where opacity-background applies to all elements' background
properties like images and colors, while opacity-foreground
applies to the rest like borders, text, images, decoration,
etc. If nessesary, there could be other properties like
opacity-border and alike, but I don't see need for them to
be indepenant from text's opacity for example.

Then, like e.g. the 'margin' property, there could be
'opacity' as a shorthand property for setting
'opacity-background' and 'opacity-foreground' at the same
place in the style sheet.

  Name:        opacity
  Value:       <alphavalue>{1,2} | inherit
  Initial:     not defined for shorthand properties
  Applies to:  all elements
  Inherited:   no
  Percentages: N/A
  Media:       visual

If there was only one value, it should apply to both. If
there are two values, the foreground opacity should be set
to the first value and the background opacity should be set
to the second.

Note 1: As described in the paragraph about inheriting
the property, I don't see the use of being able to
inherit the value.

Note 2: I think it might be OK to permit percentages as
well, since they can be easily translated to <alphavalues>
(e.g. '20%' corresponds to '0.2').

Please consider my feedback and let me know your opinion
about this proposal. Thank you very much.

--Daniel Steinberger

Received on Wednesday, 20 March 2002 13:36:56 UTC