Skip to content

Commit 1f55cc3

Browse files
committed
[css-images] Per WG resolution, punt cross-fade() to level 4.
1 parent 5c15a11 commit 1f55cc3

File tree

2 files changed

+47
-50
lines changed

2 files changed

+47
-50
lines changed

css-images-3/Overview.bs

-49
Original file line numberDiff line numberDiff line change
@@ -157,55 +157,6 @@ Image References: the ''url()'' notation {#url-notation}
157157
██████ ██ ██ ███████ ██████ ██████ ██ ██ ██ ████████ ████████ ███ ███
158158
-->
159159

160-
Combining images: the ''cross-fade()'' notation {#cross-fade-function}
161-
----------------------------------------------------------------------
162-
163-
When transitioning between images,
164-
CSS requires a way to explicitly refer to the intermediate image
165-
that is a combination of the start and end images.
166-
This is accomplished with the ''cross-fade()'' function,
167-
which indicates the two images to be combined
168-
and how far along in the transition the combination is.
169-
170-
Note: Authors can also use the ''cross-fade()'' function for many simple image manipulations,
171-
such as tinting an image with a solid color
172-
or highlighting a particular area of the page by combining an image with a radial gradient.
173-
174-
The syntax for ''cross-fade()'' is defined as:
175-
176-
<pre class=prod>
177-
<dfn caniuse="css-cross-fade">cross-fade()</dfn> = cross-fade( <<cf-mixing-image>> , <<cf-final-image>>? )
178-
<dfn>&lt;cf-mixing-image></dfn> = <<percentage>>? && <<image>>
179-
<dfn>&lt;cf-final-image></dfn> = <<image>> | <<color>>
180-
</pre>
181-
182-
The function represents an image generated by
183-
combining two images.
184-
185-
The <<percentage>> represents how much of the first image is retained
186-
when it is blended with the second image.
187-
The <<percentage>> must be between ''0%'' and ''100%'' inclusive;
188-
any other value is invalid.
189-
If omitted,
190-
it defaults to the value ''50%''.
191-
192-
If the last argument is a <<color>>,
193-
it represents a solid-color image with the same intrinsic dimensions as the first image.
194-
If omitted,
195-
it defaults to the color ''transparent''.
196-
197-
More precisely,
198-
given ''cross-fade(<var>p</var> <var>A</var>, <var>B</var>)'',
199-
where <var>A</var> and <var>B</var> are images
200-
and <var>p</var> is a percentage between 0% and 100%,
201-
the function represents an image
202-
with width equal to <code>width<sub>A</sub> &times; <var>p</var> + width<sub>B</sub> &times; (1-<var>p</var>)</code>
203-
and height equal to <code>height<sub>A</sub> &times; <var>p</var> + height<sub>B</sub> &times; (1-<var>p</var>)</code>.
204-
The contents of the image must be constructed by
205-
first scaling <var>A</var> and <var>B</var> to the size of the generated image,
206-
then applying <code>dissolve(<var>A</var>,<var>p</var>) plus dissolve(<var>B</var>,1-<var>p</var>)</code>.
207-
The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. [[PORTERDUFF]]
208-
209160

210161
<!--
211162
██████ ████████ ███ ████████ ████ ████████ ██ ██ ████████ ██████

css-images-4/Overview.bs

+47-1
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,53 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
376376
Combining images: the ''cross-fade()'' notation {#cross-fade-function}
377377
----------------------------------------------------------------------
378378

379-
Note: No change from [[css3-images]].
379+
380+
381+
When transitioning between images,
382+
CSS requires a way to explicitly refer to the intermediate image
383+
that is a combination of the start and end images.
384+
This is accomplished with the ''cross-fade()'' function,
385+
which indicates the two images to be combined
386+
and how far along in the transition the combination is.
387+
388+
Note: Authors can also use the ''cross-fade()'' function for many simple image manipulations,
389+
such as tinting an image with a solid color
390+
or highlighting a particular area of the page by combining an image with a radial gradient.
391+
392+
The syntax for ''cross-fade()'' is defined as:
393+
394+
<pre class=prod>
395+
<dfn caniuse="css-cross-fade">cross-fade()</dfn> = cross-fade( <<cf-mixing-image>> , <<cf-final-image>>? )
396+
<dfn>&lt;cf-mixing-image></dfn> = <<percentage>>? && <<image>>
397+
<dfn>&lt;cf-final-image></dfn> = <<image>> | <<color>>
398+
</pre>
399+
400+
The function represents an image generated by
401+
combining two images.
402+
403+
The <<percentage>> represents how much of the first image is retained
404+
when it is blended with the second image.
405+
The <<percentage>> must be between ''0%'' and ''100%'' inclusive;
406+
any other value is invalid.
407+
If omitted,
408+
it defaults to the value ''50%''.
409+
410+
If the last argument is a <<color>>,
411+
it represents a solid-color image with the same intrinsic dimensions as the first image.
412+
If omitted,
413+
it defaults to the color ''transparent''.
414+
415+
More precisely,
416+
given ''cross-fade(<var>p</var> <var>A</var>, <var>B</var>)'',
417+
where <var>A</var> and <var>B</var> are images
418+
and <var>p</var> is a percentage between 0% and 100%,
419+
the function represents an image
420+
with width equal to <code>width<sub>A</sub> &times; <var>p</var> + width<sub>B</sub> &times; (1-<var>p</var>)</code>
421+
and height equal to <code>height<sub>A</sub> &times; <var>p</var> + height<sub>B</sub> &times; (1-<var>p</var>)</code>.
422+
The contents of the image must be constructed by
423+
first scaling <var>A</var> and <var>B</var> to the size of the generated image,
424+
then applying <code>dissolve(<var>A</var>,<var>p</var>) plus dissolve(<var>B</var>,1-<var>p</var>)</code>.
425+
The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. [[PORTERDUFF]]
380426

381427
<!--
382428
████████ ██ ████████ ██ ██ ████████ ██ ██ ████████ ███ ███

0 commit comments

Comments
 (0)