- From: Sebastian Zartner <sebastianzartner@gmail.com>
- Date: Thu, 4 Feb 2016 15:35:18 +0100
- To: public-fx@w3.org
- Message-ID: <CAERejNaHgXB9ka4x-YXoKTSOx50SuL8GJhRXKmt6NOtrVymqLA@mail.gmail.com>
The backdrop-filter CSS property allows to create a filtered backdrop for an element[1] and the filter CSS property filters all parts of the drawing of an element. This implies a few things that are suboptimal: - The Fullscreen API spec. already defines a ::backdrop pseudo-element[2], which suggests that it and the backdrop-filter property belong together somehow. - A <filter> element reference is required to specify a different input for the backdrop-filter property than the BackgroundImage. - The two properties do not allow to specify where to place the filtered output in regard of the painting order. My suggestion to solve these issues is: - Drop the backdrop-filter property in favor of allowing ::backdrop to be used on all elements independently of the layer they are in. - Introduce a filter-source property allowing to specify the sources for filter primitives. This property refers to the in attribute of the <filter> element and has therefore the following syntax: filter-source: [ source-graphic | source-alpha | background | background-alpha | fill-paint | stroke-paint | <filter-primitive-reference> ]# - Introduce a filter-part property allowing to specify the parts of an element, to which the filter is applied. Its syntax may be like this: filter-part: [[ content || background || borders || outline || scroll-mechanism ] | all ]# - Introduce a filter-output-layer property allowing to define where to place the filtered output in relation to the painting order. The syntax for it may be something like this: filter-output-layer: [ background | below-border | border | below-outline | outline | below-content | content | below-scroll-mechanism atop ]# where all below-* values draw the filtered output below the named layer but above the previous layer, while all other values draw the filtered output as replacement of the named layer. - Introduce a filter-effect property holding the values, which currently apply to the filter property. - Turn the filter property into a shorthand for the properties above, so it may then have a syntax like this: filter: <filter># where <filter> = <'filter-effect'> <'filter-source'>? <'filter-part'>? <'filter-output-layer'>? To achieve a backdrop effect as of backdrop-filter you would then write e.g.: ::backdrop { filter: blur(2px) brightness(20%) all atop; } To make the border of an element have a blue drop shadow you could write something like this: #element { filter-effect: drop-shadow(2px 2px 3px blue); filter-part: border; filter-output-layer: below-border; } This is just a rough draft. I welcome every input on this. Sebastian [1] This should be clarified in an initial sentence. [2] https://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element
Received on Thursday, 4 February 2016 14:36:05 UTC