Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 8 additions & 24 deletions filter-effects-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -375,12 +375,10 @@ Unless defined otherwise, omitted values default to the <a for=svg>initial value
Note: For some filter functions the default value for omitted values differes from their <a for=svg>initial value</a> for interpolation. For the convenience of content creators, the default value for omitted values for ''grayscale()'', ''sepia()'' and ''invert()'' is ''1'' (apply the effect to 100%) while the <a for=svg>initial value</a> for interpolation is ''0'' (no effect).

<dl id="FilterFunction" dfn-for="filter">
: <pre class=prod><dfn>blur()</dfn> = blur( <<length>>? )</pre>
: <pre class=prod><dfn>blur()</dfn> = blur( <<length [0,∞]>>? )</pre>
::
Applies a Gaussian blur to the input image. The passed parameter defines the value of the standard deviation to the Gaussian function. The parameter is specified a CSS length, but does not accept percentage values. The markup equivalent of this function is <a href="#blurEquivalent">given below</a>.

Negative values are not allowed.

Default value when omitted is ''0px''.

The <a for=svg>initial value</a> for interpolation is ''0px''.
Expand All @@ -391,21 +389,17 @@ Note: For some filter functions the default value for omitted values differes fr

Note: A true Gaussian blur has theoretically infinite extent, but in practice all implementations use a finite-area approximation of a Gaussian blur. At the time of writing (January 2024) all major implementations use the familiar three-pass box blur approximation, which has extent:<br> <code>((3 * sqrt(2 * &pi;) / 4) * &sigma;)</code>.

: <pre class=prod><dfn>brightness()</dfn> = brightness( [ <<number>> | <<percentage>> ]? )</pre>
: <pre class=prod><dfn>brightness()</dfn> = brightness( [ <<number [0,∞]>> | <<percentage [0,∞]>> ]? )</pre>
::
Applies a linear multiplier to input image, making it appear more or less bright. A value of ''0%'' will create an image that is completely black. A value of ''100%'' leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing brighter results. The markup equivalent of this function is <a href="#brightnessEquivalent">given below</a>.

Negative values are not allowed.

Default value when omitted is ''1''.

The <a for=svg>initial value</a> for interpolation is ''1''.
: <pre class=prod><dfn>contrast()</dfn> = contrast( [ <<number>> | <<percentage>> ]? )</pre>
: <pre class=prod><dfn>contrast()</dfn> = contrast( [ <<number [0,∞]>> | <<percentage [0,∞]>> ]? )</pre>
::
Adjusts the contrast of the input. A value of ''0%'' will create an image that is completely gray. A value of ''100%'' leaves the input unchanged. Values of amount over 100% are allowed, providing results with more contrast. The markup equivalent of this function is <a href="#contrastEquivalent">given below</a>.

Negative values are not allowed.

Default value when omitted is ''1''.

The <a for=svg>initial value</a> for interpolation is ''1''.
Expand All @@ -424,12 +418,10 @@ Note: For some filter functions the default value for omitted values differes fr
The [=ink overflow rectangle=] for a drop shadow is the extent of the offsets,
plus the extent of the blur (if any) as described for ''blur()''.

: <pre class=prod><dfn>grayscale()</dfn> = grayscale( [ <<number>> | <<percentage>> ]? )</pre>
: <pre class=prod><dfn>grayscale()</dfn> = grayscale( [ <<number [0,∞]>> | <<percentage [0,∞]>> ]? )</pre>
::
Converts the input image to grayscale. The passed parameter defines the proportion of the conversion. A value of ''100%'' is completely grayscale. A value of ''0%'' leaves the input unchanged. Values between ''0%'' and ''100%'' are linear multipliers on the effect. Values of amount over ''100%'' are allowed but UAs must clamp the values to ''1''. The markup equivalent of this function is <a href="#grayscaleEquivalent">given below</a>.

Negative values are not allowed.

Default value when omitted is ''1''.

The <a for=svg>initial value</a> for interpolation is ''0''.
Expand All @@ -443,42 +435,34 @@ Note: For some filter functions the default value for omitted values differes fr
Default value when omitted is ''0deg''.

The <a for=svg>initial value</a> for interpolation is ''0deg''.
: <pre class=prod><dfn>invert()</dfn> = invert( [ <<number>> | <<percentage>> ]? )</pre>
: <pre class=prod><dfn>invert()</dfn> = invert( [ <<number [0,∞]>> | <<percentage [0,∞]>> ]? )</pre>
::
Inverts the samples in the input image. The passed parameter defines the proportion of the conversion. A value of 100% is completely inverted. A value of ''0%'' leaves the input unchanged. Values between ''0%'' and ''100%'' are linear multipliers on the effect. Values of amount over ''100%'' are allowed but UAs must clamp the values to ''1''. The markup equivalent of this function is <a href="#invertEquivalent">given below</a>.

Negative values are not allowed.

Default value when omitted is ''1''.

The <a for=svg>initial value</a> for interpolation is ''0''.
: <pre class=prod><dfn>opacity()</dfn> = opacity( [ <<number>> | <<percentage>> ]? )</pre>
: <pre class=prod><dfn>opacity()</dfn> = opacity( [ <<number [0,∞]>> | <<percentage [0,∞]>> ]? )</pre>
::
Applies transparency to the samples in the input image. The passed parameter defines the proportion of the conversion. A value of ''0%'' is completely transparent. A value of ''100%'' leaves the input unchanged. Values between ''0%'' and ''100%'' are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. Values of amount over ''100%'' are allowed but UAs must clamp the values to ''1''. The markup equivalent of this function is <a href="#opacityEquivalent">given below</a>.

Negative values are not allowed.

Default value when omitted is ''1''.

The <a for=svg>initial value</a> for interpolation is ''1''.

Note: The opacity filter function is not meant to be a shorthand of the 'opacity' property. Furthermore, it allows setting the transparency of intermediate filter primitive results before passing to the next filter primitive. If the opacity filter function is set as last filter primitive, the value of the 'opacity' property is multiplied on top of the value of the filter function, which may result in a more transparent content.

: <pre class=prod><dfn>saturate()</dfn> = saturate( [ <<number>> | <<percentage>> ]? )</pre>
: <pre class=prod><dfn>saturate()</dfn> = saturate( [ <<number [0,∞]>> | <<percentage [0,∞]>> ]? )</pre>
::
Saturates the input image. The passed parameter defines the proportion of the conversion. A value of ''0%'' is completely un-saturated. A value of ''100%'' leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over ''100%'' are allowed, providing super-saturated results. The markup equivalent of this function is <a href="#saturateEquivalent">given below</a>.

Negative values are not allowed.

Default value when omitted is ''1''.

The <a for=svg>initial value</a> for interpolation is ''1''.
: <pre class=prod><dfn>sepia()</dfn> = sepia( [ <<number>> | <<percentage>> ]? )</pre>
: <pre class=prod><dfn>sepia()</dfn> = sepia( [ <<number [0]>> | <<percentage>> ]? )</pre>
::
Converts the input image to sepia. The passed parameter defines the proportion of the conversion. A value of ''100%'' is completely sepia. A value of ''0%'' leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. Values of amount over ''100%'' are allowed but UAs must clamp the values to ''1''. The markup equivalent of this function is <a href="#sepiaEquivalent">given below</a>.

Negative values are not allowed.

Default value when omitted is ''1''.

The <a for=svg>initial value</a> for interpolation is ''0''.
Expand Down