Skip to content

Commit 1f55cc3

Browse files
tabatkinstabatkins
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

Lines changed: 0 additions & 49 deletions
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-
177-
		cross-fade() = cross-fade( <> , <>? )
178-
		<cf-mixing-image> = <>? && <>
179-
		<cf-final-image> = <> | <>
180-
	
181-
182-
	The function represents an image generated by
183-
	combining two images.
184-
185-
	The <> represents how much of the first image is retained
186-
	when it is blended with the second image.
187-
	The <> 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 <>,
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(p A, B)'',
199-
	where A and B are images
200-
	and p is a percentage between 0% and 100%,
201-
	the function represents an image
202-
	with width equal to widthA × p + widthB × (1-p)
203-
	and height equal to heightA × p + heightB × (1-p).
204-
	The contents of the image must be constructed by
205-
	first scaling A and B to the size of the generated image,
206-
	then applying dissolve(A,p) plus dissolve(B,1-p).
207-
	The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. [[PORTERDUFF]]
208-
209160

210161
css-images-4/Overview.bs
Lines changed: 47 additions & 1 deletion
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+
	
395+
		cross-fade() = cross-fade( <> , <>? )
396+
		<cf-mixing-image> = <>? && <>
397+
		<cf-final-image> = <> | <>
398+
	
399+
400+
	The function represents an image generated by
401+
	combining two images.
402+
403+
	The <> represents how much of the first image is retained
404+
	when it is blended with the second image.
405+
	The <> 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 <>,
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(p A, B)'',
417+
	where A and B are images
418+
	and p is a percentage between 0% and 100%,
419+
	the function represents an image
420+
	with width equal to widthA × p + widthB × (1-p)
421+
	and height equal to heightA × p + heightB × (1-p).
422+
	The contents of the image must be constructed by
423+
	first scaling A and B to the size of the generated image,
424+
	then applying dissolve(A,p) plus dissolve(B,1-p).
425+
	The "dissolve()" function and "plus" compositing operator are defined in the literature by Porter-Duff. [[PORTERDUFF]]
380426

381427
 commit comments
Comments
 (0)