Re: [css3-background] possibly too late for last call, but: background-opacity?

On Oct 16, 2009, at 4:59 AM, Giovanni Campagna wrote:

>> opacity:0.5;
>> apply-effect:opacity, background-image + background-color;
>>
>> And you're right; I didn't originally account for multiple  
>> backgrounds. I
>> like the way you have it, and would say
>> that background-image and background-image(0) would be equivelent.  
>> So,
>> without my messed up notation on using this as a property, it would  
>> actually
>> look like this:
>>
>> opacity:0.5;
>> apply-effect:opacity, background-image(1,2,4) + background-color;
>>
>>
>>>
>>> and would these properties be able to be animated?
>>
>>
>> 'opacity' would be, but 'apply-effect' or 'visibility' would not  
>> be. It
>> would just continue to be the same throughout. So, if the effect
>> (opacity) only applied to the background, then you would be  
>> animating the
>> opacity of the background, and leaving the borders opacity, etc.  
>> alone.
>
> Does that mean that an element gets multiple "opacity" properties? Or
> that you cannot set opacity different than auto for everything outside
> the apply-effect selected portions?

The element would have only one computed 'opacity' property value, as  
before, but if the value of 'apply-effect' was 'opacity, [something  
other than 'all']'', then visually you would see part of the element  
(such as background images) with the opacity value you set, and the  
rest (borders, content, etc.) looking like it had the initial value  
(opacity:1).

> And what about multiple effects? Do you use a syntax separator?
> And how that composes with cascade, like if I want to set an opacity
> effect for background somewhere and a drop shadow for the border image
> in another selector?
> Are "creative selectors" always needed?

Well, yes, that is more or less how I was imagining it. So 'apply- 
effect: opacity, background-image' would override 'apply-effect:  
opacity, [anything else, such as 'border' or 'all']', but would not  
override 'apply-effect: drop-shadow, [anything]'

> (It seems an use case for the "cascade" keyword, but I know that this
> is not much enjoyed by implementers)
>
> Moreover, what about making it a part of affected properties, like:
> opacity: 1.0 apply-to(background), 0.7 apply-to(content);

If it was within the property itself (as I had in my first 'drop- 
shadow' proposal), then I think that would be a lot harder, because  
some properties already have complex syntax that wouldn't really allow  
for a comma-separated list like that. How would you add multiple drop- 
shadow values, for instance?

I think that having the specified value (of opacity, drop-shadow, or  
whatever) applied to particular layers of an element (border,  
background-image, etc.) and the initial values applied to the rest of  
the layers would be plenty without over-complicating things too  
drastically.

> Or what if we go the IE / Mozilla way, by extending filter, adding
> commas, functional notations for common filters and apply-to()
> filter: opacity(0.5) apply-to(background), drop-shadow(10px,10px)
> apply-to(border-image), "../filters/multicolorblur.xml"
> apply-to(box-shadow),
> url("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../ 
> images/shared/lvlogo.png,
> sizingMethod='scale')") apply-to(all);
>
> (this would make opacity obsolete, deprecated or syntactic sugar for
> filter: opacity() apply-to(all));

Hmmm. So you basically would then be putting the current possible  
values of 'opacity', etc. into functions within the filter value? I'm  
not sure it is worth it just to be able to have more than 2 used  
values per element. I think it would be enough to just have just the  
initial value and one specified value apply. You could still have  
something like this:

filter("../filters/multicolorblur.xml"); /* or whatever the 'filter'  
syntax normally is */
apply-effect: filter, border + background-color;