Skip to content

Commit 416971e

Browse files
authored
[css-images-4] Added example for 3.5.2
Added requested example in paragraph 3.5.2. Fixes w3c#6658
1 parent f6a8a4e commit 416971e

1 file changed

Lines changed: 17 additions & 1 deletion

File tree

css-images-4/Overview.bs

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1617,7 +1617,23 @@ Coloring the Gradient Line</h4>
16171617
between the surrounding color stops,
16181618
with the “halfway color” occurring exactly where the hint specifies.
16191619

1620-
Issue: Add a visual example of a color hint being used.
1620+
<div class=example>
1621+
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).
1622+
1623+
<img src="images/gradient-colors-transition-hint-comparison.png" alt="">
1624+
1625+
Top - Without transition hint (falling back to the default halfway transition hint):
1626+
1627+
<pre class=lang-css>
1628+
background: linear-gradient(to right, red 0%, blue 100%);
1629+
</pre>
1630+
1631+
Bottom - With transition hint:
1632+
1633+
<pre class=lang-css>
1634+
background: linear-gradient(to right, red 0%, 25%, blue 100%);
1635+
</pre>
1636+
</div>
16211637

16221638
If multiple <a>color stops</a> have the same position,
16231639
they produce an infinitesimal transition from the one specified first in the list

0 commit comments

Comments
 (0)