Skip to content

Commit c7b5733

Browse files
committed
x
1 parent 643b190 commit c7b5733

1 file changed

Lines changed: 30 additions & 14 deletions

File tree

css3-gcpm/Overview.html

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3451,6 +3451,12 @@ <h3>Pull-quotes</h3>
34513451
<h3 id=exclusions-based-on-images><span class=secno>13.4. </span>Exclusions
34523452
based on images</h3>
34533453

3454+
<p>Exclusions are often based on shapes found in images. In this
3455+
specification, the background image carries the shape, around which text
3456+
is wrapped. The new property &lsquo;<code
3457+
class=property>background-exclude-level</code>&rsquo; indicates a level in
3458+
the alpha channel of the background image(s) that defines the shape.
3459+
34543460
<div class=example>
34553461
<p>Here is an example that uses the background of the multicol element as
34563462
a template for exclusions. <img src=car1.jpg>
@@ -3460,7 +3466,7 @@ <h3 id=exclusions-based-on-images><span class=secno>13.4. </span>Exclusions
34603466
padding: 4em;
34613467
columns: 15em;
34623468
background: url(nicecar.jpg);
3463-
background-exclude: 0.5;
3469+
background-exclude-level: 0.5;
34643470
}
34653471
article h1 { column-span: all } /* Bonneville Speedway */
34663472
</pre>
@@ -3490,13 +3496,17 @@ <h3 id=exclusions-based-on-images><span class=secno>13.4. </span>Exclusions
34903496
background: repeat-y url(zigzag.png);
34913497
background-exclude-level: 0.5;
34923498
}
3493-
3499+
article h1 {
3500+
column-span: all;
3501+
}
34943502
</pre>
34953503
</div>
34963504

34973505
<h3 id=exclusions-based-on-shapes><span class=secno>13.5. </span>Exclusions
34983506
based on shapes</h3>
34993507

3508+
<p class=issue>Is this needed?
3509+
35003510
<div class=example> <img src=heart1.png>
35013511
<pre>
35023512
article::column(1) {
@@ -3581,19 +3591,24 @@ <h3 id=turning-columns-into-regions><span class=secno>14.2. </span>Turning
35813591

35823592
<div class=example> <img alt="sample rendering" src=regions.png>
35833593
<pre>
3584-
article { columns: 3 }
3585-
img { column-span: 2; width: 100%; float: top }
3586-
article::column(1) { /* selects column 1 */
3587-
column-span: 2;
3588-
float: top;
3589-
visibility: collapse; /* so that column 2 moves in */
3590-
height: 3em; /* or something */
3591-
}
3594+
article { columns: 3 }
3595+
img { column-span: 2; width: 100%; float: top }
3596+
article::column(1) { /* selects column 1 */
3597+
column-span: 2;
3598+
float: top;
3599+
visibility: collapse; /* so that column 2 moves in */
3600+
height: 3em; /* or something */
3601+
}
3602+
3603+
&lt;article>
3604+
&lt;img ...>
3605+
&lt;p>... &lt;p>... &lt;p>...
3606+
&lt;/article>
35923607
</pre>
35933608
</div>
3594-
3595-
<div class=example>
3596-
<pre>
3609+
<!--
3610+
<div class=example>
3611+
<pre>
35973612
article { columns: 14em; }
35983613
article::column(1) {
35993614
position: absolute;
@@ -3602,7 +3617,8 @@ <h3 id=turning-columns-into-regions><span class=secno>14.2. </span>Turning
36023617
...
36033618
}
36043619
</pre>
3605-
</div>
3620+
</div>
3621+
-->
36063622

36073623
<h2 id=the-first-page-pseudo-element><span class=secno>15. </span>The
36083624
&lsquo;<code class=property>first-page</code>&rsquo; pseudo-element</h2>

0 commit comments

Comments
 (0)