Skip to content

Commit fe5c697

Browse files
committed
adding more on background images, selecting columns
1 parent b32fc33 commit fe5c697

1 file changed

Lines changed: 37 additions & 10 deletions

File tree

css3-gcpm/Overview.src.html

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3027,6 +3027,9 @@ <h3>Pull-quotes</h3>
30273027

30283028
<h3>Exclusions based on images</h3>
30293029

3030+
3031+
3032+
30303033
<div class=example>
30313034
<p>Here is an example that uses the background of the multicol element as a template for exclusions.
30323035
<img src=car1.jpg>
@@ -3035,7 +3038,7 @@ <h3>Exclusions based on images</h3>
30353038
padding: 4em;
30363039
columns: 15em;
30373040
background: url(nicecar.jpg);
3038-
background-exclude-threshold: 0.5;
3041+
background-exclude: 0.5;
30393042
}
30403043
article h1 { column-span: all } /* Bonneville Speedway */
30413044
</pre>
@@ -3051,12 +3054,29 @@ <h3>Exclusions based on images</h3>
30513054
padding: 4em;
30523055
columns: 6em;
30533056
background: url(nicecar.jpg);
3054-
background-exclude-threshold: 0.5;
3057+
background-exclude-level: 0.5;
30553058
}
30563059
article h1 { column-span: all } /* Bonneville Speedway */
30573060
</pre>
30583061
</div>
30593062

3063+
<p>Background images can be repeated. Therefore exclusions based on images can be repeated.
3064+
3065+
<div class=example>
3066+
3067+
<img src=exclusions_repeating.jpg>
3068+
3069+
<pre>
3070+
article {
3071+
background: repeat-y url(zigzag.png);
3072+
background-exclude-level: 0.5;
3073+
}
3074+
3075+
</pre>
3076+
3077+
</div>
3078+
3079+
30603080

30613081
<h3>Exclusions based on shapes</h3>
30623082

@@ -3123,23 +3143,30 @@ <h2>Aligning baselines in multi-column layouts</h2>
31233143

31243144
<h2>Regions</h2>
31253145

3126-
<p>Regions are stylable boxes into which content can be poured.
3127-
Columns are a kind of regions that are automatically generated to
3146+
<p>Regions are series of stylable boxes into which content can be
3147+
poured. Columns are regions that are automatically generated to
31283148
contain all the content of the the multicol element. By adding
3129-
selectors for columns, columns can be styled and positioned.
3149+
selectors for columns, columns can be styled and positioned and
3150+
thereby escape the rigid patterns that columns naturally live in.
31303151

31313152
<h3>Selecting columns</h3>
31323153

31333154
<div class=example>
31343155
<pre>
3135-
div.chapter::column(3) /* the third column of the element */
3136-
div.chapter::column(2n) /* all even columns of the element */
3137-
div.chapter::column(3+) /* all even columns of the element */
3138-
div.chapter::column(2,2) /* second column on second page */
3139-
div.chapter::column(*,2) /* all columns on the second page */
3156+
div.chapter::column(3) /* the 3rd column of the element */
3157+
div.chapter::column(2n) /* all even columns of the element */
3158+
div.chapter::column(3+) /* all columns but the 1st and 2nd */
3159+
div.chapter::column(2,2) /* second column on second page */
3160+
div.chapter::column(*,2) /* all columns on the second page */
3161+
div.chapter::column(,2) /* all columns on the second page */
31403162
</pre>
31413163
</div>
31423164

3165+
3166+
<h3>Turning columns into regions</h3>
3167+
3168+
<p>A column that is moved from its natural position into
3169+
31433170
<p>Columns can be moved
31443171

31453172
<div class=example>

0 commit comments

Comments
 (0)