[csswg-drafts] [css-images-4] Solution for Issue: Add a visual example of a color hint being used. (#6658)

vHeemstra has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images-4] Solution for Issue: Add a visual example of a color hint being used. ==
In the working draft for CSS Images (level 4) under [3. Gradients](https://drafts.csswg.org/css-images-4/#gradients), there an issue mentioned in [3.5.2. Coloring the Gradient Line](https://drafts.csswg.org/css-images-4/#coloring-gradient-line):
[**"Add a visual example of a color hint being used."**](https://github.com/w3c/csswg-drafts/blob/971196b960b866930c67f848bc9eda8e34fa80a9/css-images-4/Overview.bs#L1620)

I made an example to be included in the draft.

Code to be inserted at [css-images-4/Overview.bs#L1620](https://github.com/w3c/csswg-drafts/blob/971196b960b866930c67f848bc9eda8e34fa80a9/css-images-4/Overview.bs#L1620):
```
<div class=example>
 Here an example of a linear gradient without [=transition hint=] (top) compared to one with a transition hint between the red and blue [=color stops=] (bottom).

 <img src="images/gradient-colors-transition-hint-comparison.png" alt="">

 Top - Without transition hint (falling back to the default halfway transition hint):
 
 <pre class=lang-css>
  background: linear-gradient(to right, red 0%, blue 100%);
 </pre>

 Bottom - With transition hint:

 <pre class=lang-css>
  background: linear-gradient(to right, red 0%, 25%, blue 100%);
 </pre>
</div>
```

The image used in this example:

![gradient-colors-transition-hint-comparison](https://user-images.githubusercontent.com/17368112/134266282-4104ebe6-01f8-4918-9b0b-b0fb2a7758b5.png)
***gradient-colors-transition-hint-comparison.png***



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6658 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 22 September 2021 00:56:44 UTC