Skip to content

Commit 967d44d

Browse files
tabatkinstabatkins
committed
Update all the image links to properly point into the images/ folder.
1 parent e09429f commit 967d44d

2 files changed

Lines changed: 40 additions & 45 deletions

File tree

‎css4-images/Overview.html‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -609,16 +609,13 @@ <h4 id=image-fragments><span class=secno>4.2.1. </span> Image Fragments</h4>
609609
<div class=example>
610610
<p> For example, given the following image* and CSS: <a href=sprites.svg>
611611
<img alt="[9 circles, with 0 to 8 eighths filled in]" height=20
612-
src=sprites.svg width=180> </a>
612+
src="images/sprites.svg" width=180> </a>
613613

614614
<pre>background-image: image('sprites.svg#xywh=40,0,20,20')</pre>
615615

616616
<p> ...the background of the element will be the portion of the image that
617617
starts at (40px,0px) and is 20px wide and tall, which is just the circle
618618
with a quarter filled in.
619-
620-
<p><small>* SVG-in-&lt;img> support required. Click the picture to view
621-
the SVG directly.</small>
622619
</div>
623620

624621
<p> So that authors can take advantage of CSS's forwards-compatible parsing
@@ -901,7 +898,7 @@ <h3 id=element-notation><span class=secno>4.3. </span> Using Elements as
901898
-->&lt;p id='src'>I'm an ordinary element!&lt;/p>
902899
<!--
903900
-->&lt;p id='dst'>I'm using the previous element as my background!&lt;/p></pre>
904-
<img alt="" src=element-function.png></div>
901+
<img alt="" src="images/element-function.png"></div>
905902

906903
<dt>an <a href="#element-not-rendered"><i
907904
title=element-not-rendered>element that is not rendered</i></a>, but
@@ -1409,7 +1406,8 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>5.1.1. </span>
14091406
<div class=example>
14101407
<div style="overflow: hidden"> <img
14111408
alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box. The starting point and ending point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]"
1412-
src=gradient-diagram.png style="float: right; margin-left: 1em;">
1409+
src="images/gradient-diagram.png"
1410+
style="float: right; margin-left: 1em;">
14131411
<p> This example illustrates visually how to calculate the <a
14141412
href="#gradient-line"><i>gradient line</i></a> from the rules above.
14151413
This shows the starting and ending point of the <a
@@ -1464,7 +1462,7 @@ <h4 class=no-toc id=linear-gradient-examples><span class=secno>5.1.2.
14641462
<!--
14651463
-->linear-gradient(to bottom, yellow 0%, blue 100%);</pre>
14661464

1467-
<p><img alt="" src=linear1.png>
1465+
<p><img alt="" src="images/linear1.png">
14681466
</div>
14691467

14701468
<div class=example>
@@ -1479,7 +1477,7 @@ <h4 class=no-toc id=linear-gradient-examples><span class=secno>5.1.2.
14791477
<!--
14801478
-->linear-gradient(-45deg, blue, yellow);</pre>
14811479

1482-
<p><img alt="" src=linear3.png>
1480+
<p><img alt="" src="images/linear3.png">
14831481
</div>
14841482

14851483
<div class=example>
@@ -1488,7 +1486,7 @@ <h4 class=no-toc id=linear-gradient-examples><span class=secno>5.1.2.
14881486

14891487
<pre>linear-gradient(yellow, blue 20%, #0f0);</pre>
14901488

1491-
<p><img alt="" src=linear4.png>
1489+
<p><img alt="" src="images/linear4.png">
14921490
</div>
14931491

14941492
<div class=example id=corner-gradient-example>
@@ -1501,8 +1499,8 @@ <h4 class=no-toc id=linear-gradient-examples><span class=secno>5.1.2.
15011499

15021500
<pre>linear-gradient(to top right, red, white, blue)</pre>
15031501

1504-
<p><object data=gradient1.svg height=100 width=200>(Image requires
1505-
SVG)</object>
1502+
<p><object data="images/gradient1.svg" height=100 width=200>(Image
1503+
requires SVG)</object>
15061504
</div>
15071505
<!--
15081506
dddddddd
@@ -1803,15 +1801,15 @@ <h4 class=no-toc id=radial-gradient-examples><span class=secno>5.2.4.
18031801
<!--
18041802
-->radial-gradient(farthest-corner at 50% 50%, yellow, green);</pre>
18051803

1806-
<p><img alt="" src=radial1.png>
1804+
<p><img alt="" src="images/radial1.png">
18071805

18081806
<pre>radial-gradient(circle, yellow, green);</pre>
18091807

1810-
<p><img alt="" src=radial2.png>
1808+
<p><img alt="" src="images/radial2.png">
18111809

18121810
<pre>radial-gradient(red, yellow, green);</pre>
18131811

1814-
<p><img alt="" src=radial3.png>
1812+
<p><img alt="" src="images/radial3.png">
18151813
</div>
18161814

18171815
<div class=example>
@@ -1820,7 +1818,7 @@ <h4 class=no-toc id=radial-gradient-examples><span class=secno>5.2.4.
18201818

18211819
<pre>radial-gradient(farthest-side at left bottom, red, yellow 50px, green);</pre>
18221820

1823-
<p><img alt="" src=radial4.png>
1821+
<p><img alt="" src="images/radial4.png">
18241822
</div>
18251823

18261824
<div class=example>
@@ -1832,14 +1830,14 @@ <h4 class=no-toc id=radial-gradient-examples><span class=secno>5.2.4.
18321830
<!--
18331831
-->radial-gradient(20px 30px at 20px 30px, red, yellow, green);</pre>
18341832

1835-
<p><img alt="" src=radial6.png>
1833+
<p><img alt="" src="images/radial6.png">
18361834

18371835
<pre><!--
18381836
-->radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
18391837
<!--
18401838
-->radial-gradient(20px 20px at 20px 30px, red, yellow, green);</pre>
18411839

1842-
<p><img alt="" src=radial7.png>
1840+
<p><img alt="" src="images/radial7.png">
18431841
</div>
18441842
<!--
18451843
RRRRRRRRRRRRRRRRR tttt iiii
@@ -1898,15 +1896,15 @@ <h3 id=repeating-gradients><span class=secno>5.3. </span> Repeating
18981896

18991897
<pre>repeating-linear-gradient(red, blue 20px, red 40px)</pre>
19001898

1901-
<p><img alt="" src=repeating1.png>
1899+
<p><img alt="" src="images/repeating1.png">
19021900

19031901
<pre>repeating-radial-gradient(red, blue 20px, red 40px)</pre>
19041902

1905-
<p><img alt="" src=repeating2.png>
1903+
<p><img alt="" src="images/repeating2.png">
19061904

19071905
<pre>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</pre>
19081906

1909-
<p><img alt="" src=repeating3.png>
1907+
<p><img alt="" src="images/repeating3.png">
19101908
</div>
19111909

19121910
<p> If the distance between the first and last color-stops is non-zero, but
@@ -2634,11 +2632,11 @@ <h3 id=the-object-fit><span class=secno>6.5. </span> Sizing Objects: the
26342632
content will never overflow. See the ‘<a href="#object-position"><code
26352633
class=property>object-position</code></a>’ property for positioning the
26362634
object with respect to the content box. <figure> <img alt
2637-
src="img_scale.png" style="border: thin solid black;"> <figcaption> An
2638-
example showing how four of the values of ‘<a href="#object-fit"><code
2639-
class=property>object-fit</code></a>’ cause the replaced element (blue
2640-
figure) to be scaled to fit its height/width box (shown with a green
2641-
background), using the initial value for ‘<a
2635+
src="images/img_scale.png" style="border: thin solid black;"> <figcaption>
2636+
An example showing how four of the values of ‘<a
2637+
href="#object-fit"><code class=property>object-fit</code></a>’ cause the
2638+
replaced element (blue figure) to be scaled to fit its height/width box
2639+
(shown with a green background), using the initial value for ‘<a
26422640
href="#object-position"><code
26432641
class=property>object-position</code></a>’. The fifth value, ‘<code
26442642
class=css>scale-down</code>’, in this case looks identical to ‘<code

‎css4-images/Overview.src.html‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -337,16 +337,14 @@ <h4 id="image-fragments">
337337
For example, given the following image* and CSS:
338338

339339
<a href="sprites.svg">
340-
<img src="sprites.svg" height="20" width="180" alt="[9 circles, with 0 to 8 eighths filled in]">
340+
<img src="images/sprites.svg" height="20" width="180" alt="[9 circles, with 0 to 8 eighths filled in]">
341341
</a>
342342

343343
<pre>background-image: image('sprites.svg#xywh=40,0,20,20')</pre>
344344

345345
<p>
346346
...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall,
347347
which is just the circle with a quarter filled in.
348-
349-
<p><small>* SVG-in-&lt;img> support required. Click the picture to view the SVG directly.</small>
350348
</div>
351349

352350
<p>
@@ -618,7 +616,7 @@ <h3 id='element-notation'>
618616
-->&lt;p id='src'>I'm an ordinary element!&lt;/p>&#xa;<!--
619617
-->&lt;p id='dst'>I'm using the previous element as my background!&lt;/p></pre>
620618

621-
<img src="element-function.png" alt="">
619+
<img src="images/element-function.png" alt="">
622620
</div>
623621

624622

@@ -1044,7 +1042,7 @@ <h4 class='no-toc' id='linear-gradient-syntax'>
10441042

10451043
<div class=example>
10461044
<div style="overflow: hidden">
1047-
<img style="float: right; margin-left: 1em;" src='gradient-diagram.png' alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box. The starting point and ending point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]">
1045+
<img style="float: right; margin-left: 1em;" src='images/gradient-diagram.png' alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box. The starting point and ending point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]">
10481046

10491047
<p>
10501048
This example illustrates visually how to calculate the <i>gradient line</i> from the rules above.
@@ -1094,7 +1092,7 @@ <h4 class='no-toc' id='linear-gradient-examples'>
10941092
-->linear-gradient(to top, blue, yellow);&#xa;<!--
10951093
-->linear-gradient(to bottom, yellow 0%, blue 100%);</pre>
10961094

1097-
<p><img src="linear1.png" alt="" >
1095+
<p><img src="images/linear1.png" alt="" >
10981096
</div>
10991097

11001098
<div class=example>
@@ -1108,7 +1106,7 @@ <h4 class='no-toc' id='linear-gradient-examples'>
11081106
-->linear-gradient(135deg, yellow, blue);&#xa;<!--
11091107
-->linear-gradient(-45deg, blue, yellow);</pre>
11101108

1111-
<p><img src="linear3.png" alt="" >
1109+
<p><img src="images/linear3.png" alt="" >
11121110
</div>
11131111

11141112
<div class=example>
@@ -1117,7 +1115,7 @@ <h4 class='no-toc' id='linear-gradient-examples'>
11171115

11181116
<pre>linear-gradient(yellow, blue 20%, #0f0);</pre>
11191117

1120-
<p><img src="linear4.png" alt="" >
1118+
<p><img src="images/linear4.png" alt="" >
11211119
</div>
11221120

11231121
<div class=example id='corner-gradient-example'>
@@ -1130,8 +1128,7 @@ <h4 class='no-toc' id='linear-gradient-examples'>
11301128

11311129
<pre>linear-gradient(to top right, red, white, blue)</pre>
11321130

1133-
<p><object data="gradient1.svg" width="200"
1134-
height="100">(Image requires SVG)</object>
1131+
<p><object data="images/gradient1.svg" width="200" height="100">(Image requires SVG)</object>
11351132
</div>
11361133

11371134

@@ -1405,21 +1402,21 @@ <h4 class='no-toc' id='radial-gradient-examples'>
14051402
-->radial-gradient(yellow, green);&#xa;<!--
14061403
-->radial-gradient(ellipse at center, yellow 0%, green 100%);&#xa;<!--
14071404
-->radial-gradient(farthest-corner at 50% 50%, yellow, green);</pre>
1408-
<p><img src="radial1.png" alt="" >
1405+
<p><img src="images/radial1.png" alt="" >
14091406

14101407
<pre>radial-gradient(circle, yellow, green);</pre>
1411-
<p><img src="radial2.png" alt="" >
1408+
<p><img src="images/radial2.png" alt="" >
14121409

14131410
<pre>radial-gradient(red, yellow, green);</pre>
1414-
<p><img src="radial3.png" alt="" >
1411+
<p><img src="images/radial3.png" alt="" >
14151412
</div>
14161413

14171414
<div class=example>
14181415
<p>
14191416
This image shows a gradient originating from somewhere other than the center of the box:
14201417

14211418
<pre>radial-gradient(farthest-side at left bottom, red, yellow 50px, green);</pre>
1422-
<p><img src="radial4.png" alt="" >
1419+
<p><img src="images/radial4.png" alt="" >
14231420
</div>
14241421

14251422
<div class=example>
@@ -1429,12 +1426,12 @@ <h4 class='no-toc' id='radial-gradient-examples'>
14291426
<pre><!--
14301427
-->radial-gradient(closest-side at 20px 30px, red, yellow, green);&#xa;<!--
14311428
-->radial-gradient(20px 30px at 20px 30px, red, yellow, green);</pre>
1432-
<p><img src="radial6.png" alt="" >
1429+
<p><img src="images/radial6.png" alt="" >
14331430

14341431
<pre><!--
14351432
-->radial-gradient(closest-side circle at 20px 30px, red, yellow, green);&#xa;<!--
14361433
-->radial-gradient(20px 20px at 20px 30px, red, yellow, green);</pre>
1437-
<p><img src="radial7.png" alt="" >
1434+
<p><img src="images/radial7.png" alt="" >
14381435
</div>
14391436

14401437

@@ -1491,13 +1488,13 @@ <h3 id='repeating-gradients'>
14911488
Repeating gradient syntax is identical to that of non-repeating gradients:
14921489

14931490
<pre>repeating-linear-gradient(red, blue 20px, red 40px)</pre>
1494-
<p><img src="repeating1.png" alt="">
1491+
<p><img src="images/repeating1.png" alt="">
14951492

14961493
<pre>repeating-radial-gradient(red, blue 20px, red 40px)</pre>
1497-
<p><img src="repeating2.png" alt="">
1494+
<p><img src="images/repeating2.png" alt="">
14981495

14991496
<pre>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</pre>
1500-
<p><img src="repeating3.png" alt="">
1497+
<p><img src="images/repeating3.png" alt="">
15011498
</div>
15021499

15031500
<p>
@@ -2144,7 +2141,7 @@ <h3 id="the-object-fit">
21442141
See the 'object-position' property for positioning the object with respect to the content box.
21452142

21462143
<figure>
2147-
<img src="img_scale.png" style="border: thin solid black;" alt>
2144+
<img src="images/img_scale.png" style="border: thin solid black;" alt>
21482145

21492146
<figcaption>
21502147
An example showing how four of the values of 'object-fit' cause the replaced element (blue figure)

0 commit comments

Comments
 (0)