Skip to content

Commit

Permalink
[css-images] Per WG resolution, punt cross-fade() to level 4.
Browse files Browse the repository at this point in the history
  • Loading branch information
tabatkins committed Aug 3, 2018
1 parent 5c15a11 commit 1f55cc3
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 50 deletions.
49 changes: 0 additions & 49 deletions css-images-3/Overview.bs
Expand Up @@ -157,55 +157,6 @@ Image References: the ''url()'' notation {#url-notation}
██████ ██ ██ ███████ ██████ ██████ ██ ██ ██ ████████ ████████ ███ ███
-->

Combining images: the ''cross-fade()'' notation {#cross-fade-function}
----------------------------------------------------------------------

When transitioning between images,
CSS requires a way to explicitly refer to the intermediate image
that is a combination of the start and end images.
This is accomplished with the ''cross-fade()'' function,
which indicates the two images to be combined
and how far along in the transition the combination is.

Note: Authors can also use the ''cross-fade()'' function for many simple image manipulations,
such as tinting an image with a solid color
or highlighting a particular area of the page by combining an image with a radial gradient.

The syntax for ''cross-fade()'' is defined as:

<pre class=prod>
<dfn caniuse="css-cross-fade">cross-fade()</dfn> = cross-fade( <<cf-mixing-image>> , <<cf-final-image>>? )
<dfn>&lt;cf-mixing-image></dfn> = <<percentage>>? && <<image>>
<dfn>&lt;cf-final-image></dfn> = <<image>> | <<color>>
</pre>

The function represents an image generated by
combining two images.

The <<percentage>> represents how much of the first image is retained
when it is blended with the second image.
The <<percentage>> must be between ''0%'' and ''100%'' inclusive;
any other value is invalid.
If omitted,
it defaults to the value ''50%''.

If the last argument is a <<color>>,
it represents a solid-color image with the same intrinsic dimensions as the first image.
If omitted,
it defaults to the color ''transparent''.

More precisely,
given ''cross-fade(<var>p</var> <var>A</var>, <var>B</var>)'',
where <var>A</var> and <var>B</var> are images
and <var>p</var> is a percentage between 0% and 100%,
the function represents an image
with width equal to <code>width<sub>A</sub> &times; <var>p</var> + width<sub>B</sub> &times; (1-<var>p</var>)</code>
and height equal to <code>height<sub>A</sub> &times; <var>p</var> + height<sub>B</sub> &times; (1-<var>p</var>)</code>.
The contents of the image must be constructed by
first scaling <var>A</var> and <var>B</var> to the size of the generated image,
then applying <code>dissolve(<var>A</var>,<var>p</var>) plus dissolve(<var>B</var>,1-<var>p</var>)</code>.
The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. [[PORTERDUFF]]


<!--
██████ ████████ ███ ████████ ████ ████████ ██ ██ ████████ ██████
Expand Down
48 changes: 47 additions & 1 deletion css-images-4/Overview.bs
Expand Up @@ -376,7 +376,53 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
Combining images: the ''cross-fade()'' notation {#cross-fade-function}
----------------------------------------------------------------------

Note: No change from [[css3-images]].


When transitioning between images,
CSS requires a way to explicitly refer to the intermediate image
that is a combination of the start and end images.
This is accomplished with the ''cross-fade()'' function,
which indicates the two images to be combined
and how far along in the transition the combination is.

Note: Authors can also use the ''cross-fade()'' function for many simple image manipulations,
such as tinting an image with a solid color
or highlighting a particular area of the page by combining an image with a radial gradient.

The syntax for ''cross-fade()'' is defined as:

<pre class=prod>
<dfn caniuse="css-cross-fade">cross-fade()</dfn> = cross-fade( <<cf-mixing-image>> , <<cf-final-image>>? )
<dfn>&lt;cf-mixing-image></dfn> = <<percentage>>? && <<image>>
<dfn>&lt;cf-final-image></dfn> = <<image>> | <<color>>
</pre>

The function represents an image generated by
combining two images.

The <<percentage>> represents how much of the first image is retained
when it is blended with the second image.
The <<percentage>> must be between ''0%'' and ''100%'' inclusive;
any other value is invalid.
If omitted,
it defaults to the value ''50%''.

If the last argument is a <<color>>,
it represents a solid-color image with the same intrinsic dimensions as the first image.
If omitted,
it defaults to the color ''transparent''.

More precisely,
given ''cross-fade(<var>p</var> <var>A</var>, <var>B</var>)'',
where <var>A</var> and <var>B</var> are images
and <var>p</var> is a percentage between 0% and 100%,
the function represents an image
with width equal to <code>width<sub>A</sub> &times; <var>p</var> + width<sub>B</sub> &times; (1-<var>p</var>)</code>
and height equal to <code>height<sub>A</sub> &times; <var>p</var> + height<sub>B</sub> &times; (1-<var>p</var>)</code>.
The contents of the image must be constructed by
first scaling <var>A</var> and <var>B</var> to the size of the generated image,
then applying <code>dissolve(<var>A</var>,<var>p</var>) plus dissolve(<var>B</var>,1-<var>p</var>)</code>.
The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. [[PORTERDUFF]]

<!--
████████ ██ ████████ ██ ██ ████████ ██ ██ ████████ ███ ███
Expand Down

0 comments on commit 1f55cc3

Please sign in to comment.