css3-overflow/Overview.src.html

changeset 6477
8eac1d199163
parent 6476
abfd019f595b
child 6478
94d91d8d42e2
     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 -&lt;!DOCTYPE HTML&gt;
    1.42 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
    1.43  &lt;title&gt;Breaking content into
    1.44    equal-sized cards&lt;/title&gt;
    1.45  &lt;style&gt;
    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 -&lt;/div&gt;
    1.51 -		</pre></td><td>
    1.52 +&lt;/div&gt;</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>&lt;!DOCTYPE HTML&gt;
    1.62 +&lt;style&gt;
    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 +&lt;/style&gt;
    1.81 +&lt;div class="bouncy-columns"&gt;
    1.82 +  <i>...</i>
    1.83 +&lt;/div&gt;</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;

mercurial