Re: [css-images] element() image use cases

Example 2 could also be done with the CSS filter image function [1].

Apart from use cases, I would like to see how the element() function can be
implemented with no security violations and how we could define that
normatively.

1:
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterCSSImageValue


On Wed, Nov 13, 2013 at 6:44 PM, Alan Gresley <alan@css-class.com> wrote:

> On 14/11/2013 4:20 AM, Dirk Schulze wrote:
>
>> Hi,
>>
>> I had discussions with several developers and designers about the CSS
>> image function element() [1]. I was asked why the WG did broadening
>> the capabilities of element() so far. The element() function could
>> promote bad practices rather than expressive functionalities. The
>> concerns were not necessarily that functionalities should be limited
>> but rather to be clear about consequences instead of adding extensive
>> features because we can.
>>
>> These are without doubt very subjective impressions. I would like to
>> ask the members of this mailing list to send … (yes, I am absolutely
>> serious here) … use cases.
>>
>> It makes it a lot easier to justify if the functionality satisfies
>> the expectations of the authors when we can do analyzes based on use
>> cases. It may proof that the element() function is the right
>> functionality. Sometimes analyzes can reveal that different, simpler
>> functionalities are more sufficient.
>>
>> Thank you very much for participating and every use case you can
>> bring up. I think this helps understanding the expected potential of
>> element() a lot. I would like to collect these use cases on a Wiki
>> page for later reference.
>>
>> Greetings, Dirk
>>
>> [1] http://dev.w3.org/csswg/css-images/#element-notation
>>
>
>
> There are things you can do with element() that can not be done easily
> another way or done any other way.
>
> The below example 2 'element-water-background-movement1' uses opacity.
> Currently you can not make background images semi transparent unless they
> are images with alpha transparency to begin with (e.g, gif, png, svg or CSS
> gradients). This could be used as a basic cross fade where one image goes
> from opacity 1 to 0 and the other image goes from opacity 0 to 1.
>
> 1. Animating a gradient via element() regardless of the direction of the
> initial gradient.
>
> http://css-class.com/test/css/3/image/element-gradient-
> rotate-animation1.htm
>
> 2. Animating the same static image twice to produce an effect of movement
> (using a jpg).
>
> http://css-class.com/test/css/3/image/element-water-
> background-movement1.htm
>
> 3. Animating some background property of the element() or animating images
> that are animating already.
>
> http://css-class.com/test/css/3/image/element-stars-
> background-movement2.htm
>
>
> Alan
>
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
>
>