1.1 --- a/css3-overflow/Overview.src.html Mon Aug 06 17:44:42 2012 -0700 1.2 +++ b/css3-overflow/Overview.src.html Mon Aug 06 18:06:02 2012 -0700 1.3 @@ -9,6 +9,9 @@ 1.4 <link rel="stylesheet" type="text/css" 1.5 href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> 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 @@ -20,6 +23,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 </head> 1.35 1.36 @@ -209,8 +228,7 @@ 1.37 </p> 1.38 1.39 <div class="example"> 1.40 - <table style="width: 100%"><tr><td><pre> 1.41 -<!DOCTYPE HTML> 1.42 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 1.43 <title>Breaking content into 1.44 equal-sized cards</title> 1.45 <style> 1.46 @@ -237,8 +255,7 @@ 1.47 another one to be created. The second 1.48 card is created just like it's the 1.49 next sibling of the first. 1.50 -</div> 1.51 - </pre></td><td> 1.52 +</div></pre></td><td> 1.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> 1.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> 1.55 </td></tr></table> 1.56 @@ -298,6 +315,36 @@ 1.57 matches the element generating the regions. 1.58 </p> 1.59 1.60 + <div class="example"> 1.61 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 1.62 +<style> 1.63 + .bouncy-columns { 1.64 + overflow: regions; 1.65 + width: 6em; 1.66 + height: 10em; 1.67 + float: left; 1.68 + margin: 1em; 1.69 + font: medium/1.25 Times New 1.70 + Roman, Times, serif; 1.71 + } 1.72 + .bouncy-columns::nth-region(1) { 1.73 + background: aqua; color: black; 1.74 + transform: rotate(-3deg); 1.75 + } 1.76 + .bouncy-columns::nth-region(2) { 1.77 + background: yellow; color: black; 1.78 + transform: rotate(3deg); 1.79 + } 1.80 +</style> 1.81 +<div class="bouncy-columns"> 1.82 + <i>...</i> 1.83 +</div></pre></td><td> 1.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> 1.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> 1.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> 1.87 + </td></tr></table> 1.88 + </div> 1.89 + 1.90 <p> 1.91 Styling an ''::nth-region()'' pseudo-element with the 'overflow' 1.92 property has no effect;