[csswg-drafts] [css-images-4] Layering images (#5861)

m6o has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images-4] Layering images ==
Currently, the draft includes a cross-fade() notation (https://drafts.csswg.org/css-images-4/#cross-fade-function). In the same thought, a layers() notation could be introduced for layering images with transparency on top of each other.

### Layering images: the layers() notation

When layering transparent images, CSS requires a way to list images to be layered to avoid unnecessary layering of HTML-elements for a stylistic effect. This is accomplished with the layers() function, which indicates multiple images to be layered and their opacity.

The syntax for layers() is defined as:

`layers() = layers( <layer-image-list># )`
`<layer-image-list> = <layer-image> , [ <layer-image> ]#`
`<layer-image> = [ <image> | <gradient> | <color> ] && <layer-percentage>?`

The function represents an image generated by layering two or more images.

---

Alternatively, this may be accomplished as a generalization of the behavior of overlaying solid-color images (https://drafts.csswg.org/css-images-4/#color-images), without the need to explicitly type "layer()". I think this would be intuitive and add more creative freedom, but, this would also be a much more significant change to the current draft...

### Image Layers: the `<image-layers>` type

The syntax for `<image>` and cross-fade() are redefined as:

`<image> = <image-layer>#`
`<image-layer> = [ <image-layer-content> | <cross-fade()> ]  && <percentage>? `
`<image-layer-content> =<url> | <image()> | <image-set()> | <element()> | <gradient> | <color>`

`cross-fade() = cross-fade( <cf-image># )`
`<cf-image> =  <image-layer-content> && <percentage>?`

This intentionally allows cross-fading inside layers but does not allow cross-fading of multiple sets of layers to avoid a loop of cross-fade() notations within cross-fade() notations.

#### Examples:

In combination with including gradients inside the cross-fade() notation (https://github.com/w3c/csswg-drafts/issues/5860):

`background-image: cross-fade(linear-gradient(red, transparent) 100%, linear-gradient(blue, transparent) 0%) 20%, url("bg-image.png");`

Here the overlayed gradient could be transitioned from red to blue, or could fade out entirely.

Or in combination with samweinig's suggestion for specifying the color-space to compute the gradient over (https://github.com/w3c/csswg-drafts/issues/5833):

`background-image: linear-gradient(to right, transparent, grey), linear-gradient(to bottom, hsl, hsl(0, 100%, 50%) 0%, hsl(360, 100%, 50%));`



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5861 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 12 January 2021 17:17:24 UTC