Skip to content

Commit c438f1a

Browse files
dbarondbaron
committed
Add another example.
1 parent e4fbebd commit c438f1a

2 files changed

Lines changed: 131 additions & 9 deletions

File tree

‎css3-overflow/Overview.html‎

Lines changed: 80 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
type="text/css">
1212

1313
<style>
14+
table.source-demo-pair {
15+
width: 100%;
16+
}
1417
.in-cards-demo {
1518
width: 13em;
1619
height: 8em;
@@ -22,6 +25,22 @@
2225
font: medium/1.3 Times New Roman, Times, serif;
2326
white-space: nowrap;
2427
}
28+
.bouncy-columns-demo {
29+
width: 6em;
30+
height: 10em;
31+
float: left;
32+
margin: 1em;
33+
font: medium/1.25 Times New Roman, Times, serif;
34+
white-space: nowrap;
35+
}
36+
.bouncy-columns-demo.one {
37+
background: aqua; color: black;
38+
transform: rotate(-3deg);
39+
}
40+
.bouncy-columns-demo.two {
41+
background: yellow; color: black;
42+
transform: rotate(3deg);
43+
}
2544
</style>
2645

2746
<body>
@@ -302,12 +321,11 @@ <h2 id=region-overflow><span class=secno>3. </span>Region overflow</h2>
302321
even if they don't have ‘<code class=css>overflow: regions</code>’?
303322

304323
<div class=example>
305-
<table style="width: 100%">
324+
<table class=source-demo-pair>
306325
<tbody>
307326
<tr>
308327
<td>
309-
<pre>
310-
&lt;!DOCTYPE HTML&gt;
328+
<pre>&lt;!DOCTYPE HTML&gt;
311329
&lt;title&gt;Breaking content into
312330
equal-sized cards&lt;/title&gt;
313331
&lt;style&gt;
@@ -334,8 +352,7 @@ <h2 id=region-overflow><span class=secno>3. </span>Region overflow</h2>
334352
another one to be created. The second
335353
card is created just like it's the
336354
next sibling of the first.
337-
&lt;/div&gt;
338-
</pre>
355+
&lt;/div&gt;</pre>
339356

340357
<td>
341358
<div class=in-cards-demo>In this example, the text in the<br>
@@ -394,6 +411,64 @@ <h4 id=style-of-regions><span class=secno>3.1.2. </span>Styling of regions</h4>
394411
(excluding the ‘<code class=css>::nth-region()</code>’ pseudo-element)
395412
matches the element generating the regions.
396413

414+
<div class=example>
415+
<table class=source-demo-pair>
416+
<tbody>
417+
<tr>
418+
<td>
419+
<pre>&lt;!DOCTYPE HTML&gt;
420+
&lt;style&gt;
421+
.bouncy-columns {
422+
overflow: regions;
423+
width: 6em;
424+
height: 10em;
425+
float: left;
426+
margin: 1em;
427+
font: medium/1.25 Times New
428+
Roman, Times, serif;
429+
}
430+
.bouncy-columns::nth-region(1) {
431+
background: aqua; color: black;
432+
transform: rotate(-3deg);
433+
}
434+
.bouncy-columns::nth-region(2) {
435+
background: yellow; color: black;
436+
transform: rotate(3deg);
437+
}
438+
&lt;/style&gt;
439+
&lt;div class="bouncy-columns"&gt;
440+
<i>...</i>
441+
&lt;/div&gt;</pre>
442+
443+
<td>
444+
<div class="bouncy-columns-demo one">In this<br>
445+
example, the<br>
446+
text in the div<br>
447+
is broken into<br>
448+
a series of<br>
449+
columns. The<br>
450+
author<br>
451+
probably</div>
452+
453+
<div class="bouncy-columns-demo two">intended the<br>
454+
text to fill two<br>
455+
columns. But<br>
456+
if it happens to<br>
457+
fill three<br>
458+
columns, the<br>
459+
third column is<br>
460+
still created. It</div>
461+
462+
<div class=bouncy-columns-demo>just doesn't<br>
463+
have any<br>
464+
region-specific<br>
465+
styling because<br>
466+
the author<br>
467+
didn't give it<br>
468+
any.</div>
469+
</table>
470+
</div>
471+
397472
<p> Styling an ‘<code class=css>::nth-region()</code>’ pseudo-element
398473
with the ‘<code class=property>overflow</code>’ property has no
399474
effect; the computed value of ‘<code class=property>overflow</code>’

‎css3-overflow/Overview.src.html‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
<link rel="stylesheet" type="text/css"
1010
href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
1111
<style>
12+
table.source-demo-pair {
13+
width: 100%;
14+
}
1215
.in-cards-demo {
1316
width: 13em;
1417
height: 8em;
@@ -20,6 +23,22 @@
2023
font: medium/1.3 Times New Roman, Times, serif;
2124
white-space: nowrap;
2225
}
26+
.bouncy-columns-demo {
27+
width: 6em;
28+
height: 10em;
29+
float: left;
30+
margin: 1em;
31+
font: medium/1.25 Times New Roman, Times, serif;
32+
white-space: nowrap;
33+
}
34+
.bouncy-columns-demo.one {
35+
background: aqua; color: black;
36+
transform: rotate(-3deg);
37+
}
38+
.bouncy-columns-demo.two {
39+
background: yellow; color: black;
40+
transform: rotate(3deg);
41+
}
2342
</style>
2443
</head>
2544

@@ -209,8 +228,7 @@ <h2 id="region-overflow">Region overflow</h2>
209228
</p>
210229

211230
<div class="example">
212-
<table style="width: 100%"><tr><td><pre>
213-
&lt;!DOCTYPE HTML&gt;
231+
<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
214232
&lt;title&gt;Breaking content into
215233
equal-sized cards&lt;/title&gt;
216234
&lt;style&gt;
@@ -237,8 +255,7 @@ <h2 id="region-overflow">Region overflow</h2>
237255
another one to be created. The second
238256
card is created just like it's the
239257
next sibling of the first.
240-
&lt;/div&gt;
241-
</pre></td><td>
258+
&lt;/div&gt;</pre></td><td>
242259
<div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards. These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
243260
<div class="in-cards-demo">one to be created. The second<br>card is created just like it's the<br>next sibling of the first.</div>
244261
</td></tr></table>
@@ -298,6 +315,36 @@ <h4 id="style-of-regions">Styling of regions</h4>
298315
matches the element generating the regions.
299316
</p>
300317

318+
<div class="example">
319+
<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
320+
&lt;style&gt;
321+
.bouncy-columns {
322+
overflow: regions;
323+
width: 6em;
324+
height: 10em;
325+
float: left;
326+
margin: 1em;
327+
font: medium/1.25 Times New
328+
Roman, Times, serif;
329+
}
330+
.bouncy-columns::nth-region(1) {
331+
background: aqua; color: black;
332+
transform: rotate(-3deg);
333+
}
334+
.bouncy-columns::nth-region(2) {
335+
background: yellow; color: black;
336+
transform: rotate(3deg);
337+
}
338+
&lt;/style&gt;
339+
&lt;div class="bouncy-columns"&gt;
340+
<i>...</i>
341+
&lt;/div&gt;</pre></td><td>
342+
<div class="bouncy-columns-demo one">In this<br>example, the<br>text in the div<br>is broken into<br>a series of<br>columns. The<br>author<br>probably</div>
343+
<div class="bouncy-columns-demo two">intended the<br>text to fill two<br>columns. But<br>if it happens to<br>fill three<br>columns, the<br>third column is<br>still created. It</div>
344+
<div class="bouncy-columns-demo">just doesn't<br>have any<br>region-specific<br>styling because<br>the author<br>didn't give it<br>any.</div>
345+
</td></tr></table>
346+
</div>
347+
301348
<p>
302349
Styling an ''::nth-region()'' pseudo-element with the 'overflow'
303350
property has no effect;

0 commit comments

Comments
 (0)