W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2018

Re: [csswg-drafts] [css-images-3] interpolating cross-fade(A, B) with cross-fade(B, A)

From: fantasai via GitHub <sysbot+gh@w3.org>
Date: Mon, 02 Jul 2018 05:28:40 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-401676199-1530509319-sysbot+gh@w3.org>
Proposed edits:

```
diff --git a/css-images-3/Overview.bs b/css-images-3/Overview.bs
index 701eb90..aef55a8 100644
--- a/css-images-3/Overview.bs
+++ b/css-images-3/Overview.bs
@@ -1681,8 +1681,38 @@ Interpolating cross-fade() {#interpolating-image-combinations}
 --------------------------------------------------------------
 
        The three components of ''cross-fade()'' are interpolated independently.
+       However, if the two arguments match,
+       but are in opposite orders,
+       then first invert the percentage and
+       reverse the order of the images of the second ''cross-fade()''
+       before interpolating.
        Note this may result in nested ''cross-fade()'' notations.
 
+       <div class="example">
+               The following table shows some examples of image interpolation.
+
+               <table class="data">
+                       <thead>
+                               <tr>
+                                       <th>Start Image
+                                       <th>End Image
+                                       <th>50% Interpolation
+                       <tbody>
+                               <tr>
+                                       <td>''cross-fade(20% A, B)''
+                                       <td>''cross-fade(40% A, B)''
+                                       <td>''cross-fade(30% A, B)''
+                               <tr>
+                                       <td>''cross-fade(20% A, B)''
+                                       <td>''cross-fade(60% B, A)''
+                                       <td>''cross-fade(30% A, B)''
+                               <tr>
+                                       <td>''cross-fade(20% A, B)''
+                                       <td>''cross-fade(20% A, C)''
+                                       <td>''cross-fade(20% A, cross-fade(50% B, C)''
+               </table>
+       </div>
+
```

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2852#issuecomment-401676199 using your GitHub account
Received on Monday, 2 July 2018 05:28:44 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 July 2018 05:28:44 UTC