changeset
Add another example.
Mon, 06 Aug 2012 18:06:02 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Mon, 06 Aug 2012 18:06:02 -0700
- changeset 6477
- 8eac1d199163
- parent 6476
- abfd019f595b
- child 6478
- 94d91d8d42e2
Add another example.
| css3-overflow/Overview.html | file | annotate | diff | comparison | revisions | |
| css3-overflow/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-overflow/Overview.html Mon Aug 06 17:44:42 2012 -0700 1.2 +++ b/css3-overflow/Overview.html Mon Aug 06 18:06:02 2012 -0700 1.3 @@ -11,6 +11,9 @@ 1.4 type="text/css"> 1.5 1.6 <style> 1.7 + table.source-demo-pair { 1.8 + width: 100%; 1.9 + } 1.10 .in-cards-demo { 1.11 width: 13em; 1.12 height: 8em; 1.13 @@ -22,6 +25,22 @@ 1.14 font: medium/1.3 Times New Roman, Times, serif; 1.15 white-space: nowrap; 1.16 } 1.17 + .bouncy-columns-demo { 1.18 + width: 6em; 1.19 + height: 10em; 1.20 + float: left; 1.21 + margin: 1em; 1.22 + font: medium/1.25 Times New Roman, Times, serif; 1.23 + white-space: nowrap; 1.24 + } 1.25 + .bouncy-columns-demo.one { 1.26 + background: aqua; color: black; 1.27 + transform: rotate(-3deg); 1.28 + } 1.29 + .bouncy-columns-demo.two { 1.30 + background: yellow; color: black; 1.31 + transform: rotate(3deg); 1.32 + } 1.33 </style> 1.34 1.35 <body> 1.36 @@ -302,12 +321,11 @@ 1.37 even if they don't have ‘<code class=css>overflow: regions</code>’? 1.38 1.39 <div class=example> 1.40 - <table style="width: 100%"> 1.41 + <table class=source-demo-pair> 1.42 <tbody> 1.43 <tr> 1.44 <td> 1.45 - <pre> 1.46 -<!DOCTYPE HTML> 1.47 + <pre><!DOCTYPE HTML> 1.48 <title>Breaking content into 1.49 equal-sized cards</title> 1.50 <style> 1.51 @@ -334,8 +352,7 @@ 1.52 another one to be created. The second 1.53 card is created just like it's the 1.54 next sibling of the first. 1.55 -</div> 1.56 - </pre> 1.57 +</div></pre> 1.58 1.59 <td> 1.60 <div class=in-cards-demo>In this example, the text in the<br> 1.61 @@ -394,6 +411,64 @@ 1.62 (excluding the ‘<code class=css>::nth-region()</code>’ pseudo-element) 1.63 matches the element generating the regions. 1.64 1.65 + <div class=example> 1.66 + <table class=source-demo-pair> 1.67 + <tbody> 1.68 + <tr> 1.69 + <td> 1.70 + <pre><!DOCTYPE HTML> 1.71 +<style> 1.72 + .bouncy-columns { 1.73 + overflow: regions; 1.74 + width: 6em; 1.75 + height: 10em; 1.76 + float: left; 1.77 + margin: 1em; 1.78 + font: medium/1.25 Times New 1.79 + Roman, Times, serif; 1.80 + } 1.81 + .bouncy-columns::nth-region(1) { 1.82 + background: aqua; color: black; 1.83 + transform: rotate(-3deg); 1.84 + } 1.85 + .bouncy-columns::nth-region(2) { 1.86 + background: yellow; color: black; 1.87 + transform: rotate(3deg); 1.88 + } 1.89 +</style> 1.90 +<div class="bouncy-columns"> 1.91 + <i>...</i> 1.92 +</div></pre> 1.93 + 1.94 + <td> 1.95 + <div class="bouncy-columns-demo one">In this<br> 1.96 + example, the<br> 1.97 + text in the div<br> 1.98 + is broken into<br> 1.99 + a series of<br> 1.100 + columns. The<br> 1.101 + author<br> 1.102 + probably</div> 1.103 + 1.104 + <div class="bouncy-columns-demo two">intended the<br> 1.105 + text to fill two<br> 1.106 + columns. But<br> 1.107 + if it happens to<br> 1.108 + fill three<br> 1.109 + columns, the<br> 1.110 + third column is<br> 1.111 + still created. It</div> 1.112 + 1.113 + <div class=bouncy-columns-demo>just doesn't<br> 1.114 + have any<br> 1.115 + region-specific<br> 1.116 + styling because<br> 1.117 + the author<br> 1.118 + didn't give it<br> 1.119 + any.</div> 1.120 + </table> 1.121 + </div> 1.122 + 1.123 <p> Styling an ‘<code class=css>::nth-region()</code>’ pseudo-element 1.124 with the ‘<code class=property>overflow</code>’ property has no 1.125 effect; the computed value of ‘<code class=property>overflow</code>’
2.1 --- a/css3-overflow/Overview.src.html Mon Aug 06 17:44:42 2012 -0700 2.2 +++ b/css3-overflow/Overview.src.html Mon Aug 06 18:06:02 2012 -0700 2.3 @@ -9,6 +9,9 @@ 2.4 <link rel="stylesheet" type="text/css" 2.5 href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 2.6 <style> 2.7 + table.source-demo-pair { 2.8 + width: 100%; 2.9 + } 2.10 .in-cards-demo { 2.11 width: 13em; 2.12 height: 8em; 2.13 @@ -20,6 +23,22 @@ 2.14 font: medium/1.3 Times New Roman, Times, serif; 2.15 white-space: nowrap; 2.16 } 2.17 + .bouncy-columns-demo { 2.18 + width: 6em; 2.19 + height: 10em; 2.20 + float: left; 2.21 + margin: 1em; 2.22 + font: medium/1.25 Times New Roman, Times, serif; 2.23 + white-space: nowrap; 2.24 + } 2.25 + .bouncy-columns-demo.one { 2.26 + background: aqua; color: black; 2.27 + transform: rotate(-3deg); 2.28 + } 2.29 + .bouncy-columns-demo.two { 2.30 + background: yellow; color: black; 2.31 + transform: rotate(3deg); 2.32 + } 2.33 </style> 2.34 </head> 2.35 2.36 @@ -209,8 +228,7 @@ 2.37 </p> 2.38 2.39 <div class="example"> 2.40 - <table style="width: 100%"><tr><td><pre> 2.41 -<!DOCTYPE HTML> 2.42 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 2.43 <title>Breaking content into 2.44 equal-sized cards</title> 2.45 <style> 2.46 @@ -237,8 +255,7 @@ 2.47 another one to be created. The second 2.48 card is created just like it's the 2.49 next sibling of the first. 2.50 -</div> 2.51 - </pre></td><td> 2.52 +</div></pre></td><td> 2.53 <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> 2.54 <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> 2.55 </td></tr></table> 2.56 @@ -298,6 +315,36 @@ 2.57 matches the element generating the regions. 2.58 </p> 2.59 2.60 + <div class="example"> 2.61 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 2.62 +<style> 2.63 + .bouncy-columns { 2.64 + overflow: regions; 2.65 + width: 6em; 2.66 + height: 10em; 2.67 + float: left; 2.68 + margin: 1em; 2.69 + font: medium/1.25 Times New 2.70 + Roman, Times, serif; 2.71 + } 2.72 + .bouncy-columns::nth-region(1) { 2.73 + background: aqua; color: black; 2.74 + transform: rotate(-3deg); 2.75 + } 2.76 + .bouncy-columns::nth-region(2) { 2.77 + background: yellow; color: black; 2.78 + transform: rotate(3deg); 2.79 + } 2.80 +</style> 2.81 +<div class="bouncy-columns"> 2.82 + <i>...</i> 2.83 +</div></pre></td><td> 2.84 + <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> 2.85 + <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> 2.86 + <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> 2.87 + </td></tr></table> 2.88 + </div> 2.89 + 2.90 <p> 2.91 Styling an ''::nth-region()'' pseudo-element with the 'overflow' 2.92 property has no effect;
