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

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/

Received on Thursday, 14 November 2013 02:44:33 UTC