Skip to content

Commit 9d52d99

Browse files
SimonSapinSimonSapin
committed
[css-images][css-images-3] Add formula for length of linear gradient line.
1 parent dc8c13b commit 9d52d99

4 files changed

Lines changed: 650 additions & 422 deletions

File tree

‎css-images-3/Overview.html‎

100755100644
Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,27 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
22

33
<html lang=en>
4-
<head profile="http://www.w3.org/2006/03/hcard">
4+
<head
5+
profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard">
56
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
67
<title>CSS Image Values and Replaced Content Module Level 3</title>
78

9+
<link href="http://purl.org/dc/terms/" rel=schema.dcterms>
10+
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
11+
rel=dcterms.rights>
12+
<meta content="CSS Image Values and Replaced Content Module Level 3"
13+
name=dcterms.title>
14+
<meta content=text name=dcterms.type>
15+
<meta content=2013-09-11 name=dcterms.date>
16+
<meta
17+
content="<span class=&quot;p-given-name given-name&quot;>Elika</span> <abbr class=&quot;p-additional-name additional-name&quot;>J.</abbr> <span class=&quot;p-family-name family-name&quot;>Etemad</span>"
18+
name=dcterms.creator>
19+
<meta
20+
content="<span class=&quot;p-given-name given-name&quot;>Tab</span> <span class=&quot;p-family-name family-name&quot;>Atkins</span> <span class=&quot;p-honorific-suffix honorific-suffix&quot;>Jr.</span>"
21+
name=dcterms.creator>
22+
<meta content=W3C name=dcterms.publisher>
23+
<meta content="http://dev.w3.org/csswg/css3-images/"
24+
name=dcterms.identifier>
825
<link href="#contents" rel=contents>
926
<link href="#index" rel=index>
1027
<link href="../default.css" rel=stylesheet type="text/css">
@@ -1007,6 +1024,23 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
10071024
</div>
10081025
</div>
10091026

1027+
<div class=note>
1028+
<p>Given:
1029+
1030+
<ul>
1031+
<li> <var>A</var> the angle defining the gradient line’s direction such
1032+
that 0 degrees points upwards and positive angles represent clockwise
1033+
rotation,
1034+
1035+
<li><var>W</var> the width of the gradient box,
1036+
1037+
<li><var>H</var> the height of the gradient box,
1038+
</ul>
1039+
1040+
<p> The length of the gradient line (between the starting and ending
1041+
point) is: <code>abs(W * sin(A)) + abs(H * cos(A))</code>
1042+
</div>
1043+
10101044
<p>The gradient's color stops are typically placed between the starting
10111045
point and ending point on the <a href="#gradient-line"><i>gradient
10121046
line</i></a>, but this isn't required - the <a
@@ -2079,7 +2113,7 @@ <h3 id=the-object-fit><span class=secno>5.5. </span> Sizing Objects: the
20792113
class=property>object-position</code></a>’ property for positioning the
20802114
object with respect to the content box.
20812115

2082-
<div class=figure> <img alt src="img_scale.png"
2116+
<div class=figure> <img alt=alt src="img_scale.png"
20832117
style="border: thin solid black;">
20842118
<p class=caption>An example showing how four of the values of ‘<a
20852119
href="#object-fit"><code class=property>object-fit</code></a>’ cause

‎css-images-3/Overview.src.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -641,6 +641,22 @@ <h4 class='no-toc' id='linear-gradient-syntax'>
641641
</div>
642642
</div>
643643

644+
<div class=note>
645+
<p>Given:
646+
647+
<ul>
648+
<li>
649+
<var>A</var> the angle defining the gradient line’s direction
650+
such that 0 degrees points upwards and positive angles represent clockwise rotation,
651+
<li><var>W</var> the width of the gradient box,
652+
<li><var>H</var> the height of the gradient box,
653+
</ul>
654+
655+
<p>
656+
The length of the gradient line (between the starting and ending point) is:
657+
<code>abs(W * sin(A)) + abs(H * cos(A))</code>
658+
</div>
659+
644660
<p>The gradient's color stops are typically placed between the starting point
645661
and ending point on the <i>gradient line</i>, but this isn't required - the
646662
<i>gradient line</i> extends infinitely in both directions. The starting point

0 commit comments

Comments
 (0)