/fxtf-drafts

Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
Raw Blame History
78 lines (63 sloc) 4.36 KB
<h1>Filter Effects Module Level 2</h1>
<pre class='metadata'>
Status: ED
Work Status: Exploring
ED: https://drafts.fxtf.org/filter-effects-2/
TR: https://www.w3.org/TR/filter-effects-2/
Shortname: filter-effects
Level: 2
Link Defaults: css-transforms-1 (property) transform, svg (property) color-interpolation/fill/fill-opacity/fill-rule/stroke/glyph-orientation-horizontal/glyph-orientation-vertical/marker-start/marker-end/marker-mid/stop-color/stop-opacity/stroke-dasharray/stroke-dashoffset/stroke-linecap/stroke-linejoin/stroke-miterlimit/stroke-opacity/stroke-width/text-anchor/alignment-baseline/baseline-shift/dominant-baseline, css-masking-1 (property) clip-path/clip/clip-rule/mask, css-flexbox-1 (property) display, selectors-4 (type) <compound-selector>, css21 (type) <margin-width>, css-transforms-1 (type) <transform-function>, css-images-4 (property) image-rendering, css-color-3 (property) color, css-fonts-3 (property) font-family/font-stretch/font-style/font-variant/font-weight, selectors-4 (selector) :visited, css21 (dfn) containing block
Group: fxtf
Editor: Dean Jackson, Apple Inc. http://www.apple.com/, dino@apple.com, w3cid 42080
Former Editor: Dirk Schulze, Adobe Inc., dschulze@adobe.com, w3cid 51803
Test Suite: http://test.csswg.org/suites/filter-effects/nightly-unstable/
Abstract: Filter effects are a way of processing an element's rendering before it is displayed in the document. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer (such as a raster image) and then that buffer is composited into the elements parent. Filters apply an effect before the compositing stage. Examples of such effects are blurring, changing color intensity and warping the image.
Abstract:
Abstract: This is Level 2 of the Filter Effects Module.
</pre>
<h2 id="intro">Introduction</h2>
<em>This section is not normative</em>
A filter effect is a graphical operation that is applied to an element as it is
drawn into the document. It is an image-based effect, in that it takes zero or
more images as input, a number of parameters specific to the effect, and then
produces an image as output. The output image is either rendered into the
document instead of the original element, used as an input image to another
filter effect, or provided as a CSS image value.
This is Level 2 of the Filter Effects Module. It is currently written as
a "delta", describing any differences from Level 1.
<h2 id="BackdropFilterProperty">Backdrop filters: the 'backdrop-filter' property</h2>
The description of the 'backdrop-filter' property is as follows:
<pre class='propdef'>
Name: backdrop-filter
Value: none | <<filter-function-list>>
Initial: none
Applies to: All elements. In SVG, it applies to <a>container elements</a> without the defs element and all graphics elements
Inherited: no
Percentages: n/a
Computed value: as specified
Media: visual
Animatable: yes
</pre>
If the value of the 'backdrop-filter' property is ''backdrop-filter/none'' then there is no
filter effect applied. Otherwise, the list of functions are applied in the
order provided.
The first filter function or <a element>filter</a> reference in the list takes
the element's BackgroundImage as the input image. Subsequent
operations take the output from the previous filter function or <a
element>filter</a> reference as the input image. <a element>filter</a> element
reference functions can specify an alternate input, but still uses the previous
output as its SourceGraphic.
Filter functions must operate in the sRGB color space.
A computed value of other than ''backdrop-filter/none'' results in the creation of a <a
href="https://www.w3.org/TR/CSS21/zindex.html">stacking context</a> [[!CSS21]]
the same way that CSS 'opacity' does. All the elements descendants are rendered
together as a group with the filter effect applied to the group as a whole.
The result of the 'backdrop-filter' is rendered before the other painting
operations for the element. That is, behind any background of the element.
If the filter functions would have produced a result that extended beyond
the bounds of the input, it is clipped to the original bounds.
<p class="note">The use of this property may have an adverse effect on
on performance, especially when applied to a number of elements, or
a large area of the page. Authors should be careful to use it on a
minimal amount of content.
</p>