Skip to content

Commit bb91c19

Browse files
astearnsastearns
committed
[css-shapes] first stab at a <box> section
1 parent f9f2aaf commit bb91c19

6 files changed

Lines changed: 232 additions & 36 deletions

File tree

‎css-shapes/Overview.html‎

Lines changed: 99 additions & 32 deletions
Large diffs are not rendered by default.

‎css-shapes/Overview.src.html‎

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ <h2 id="relation-to-box-model-and-float-behavior">
257257
<img class="singleImgExample" src="images/stacked-float-example.png" alt="Stacking two floats with a small shape-outside"/>
258258
</div>
259259

260-
<h2 id="basic-shapes-from-svg-syntax">
260+
<h2 id="basic-shape-functions">
261261
Basic Shapes</h2>
262262

263263
The <dfn>&lt;basic-shape&gt;</dfn> type
@@ -556,6 +556,68 @@ <h2 id="shapes-from-image">
556556
</div>
557557
</div>
558558

559+
<h2 id="shapes-from-box-values">
560+
Shapes from Box Values</h2>
561+
562+
Shapes can be defined by reference to edges in the <a href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">CSS Box Model</a>. These edges include border-radius curvature. The definitions of the <dfn><<box>></dfn> values are:
563+
564+
The <dfn>margin-box</dfn> value defines the shape
565+
enclosed by the outside margin edge.
566+
The corner radii of this shape are determined by the corresponding border-radius and margin values. If the ratio of <code>border-radius/margin</code> is 1 or more, then the margin box corner radius is <code>border-radius + margin</code>. If the ratio of <code>border-radius/margin</code> is less than 1, then the margin box corner radius is <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.
567+
568+
The <dfn>border-box</dfn> value defines the shape
569+
enclosed by the outside border edge.
570+
This shape follows all
571+
of the normal border radius shaping rules
572+
for the outside of the border.
573+
574+
The <dfn>padding-box</dfn> value defines the shape
575+
enclosed by the outside padding edge.
576+
This shape follows all
577+
of the normal border radius shaping rules
578+
for the inside of the border.
579+
580+
The <dfn>content-box</dfn> value defines the shape
581+
enclosed by the outside content edge.
582+
Each corner radius of this box
583+
is the larger of 0
584+
or <code>border-radius - border-width - padding</code>.
585+
586+
<div class="example">
587+
588+
Given the 100px square below with
589+
10px padding, border and margins,
590+
the box values define these shapes:
591+
592+
<ul>
593+
<li>margin-box: the box containing all of the yellow pixels</li>
594+
<li>border-box: the box containing all of the black pixels</li>
595+
<li>padding-box: the box containing all of the mauve pixels</li>
596+
<li>content-box: the box containing all of the blue pixels</li>
597+
</ul>
598+
599+
<div class="figure">
600+
<img alt="Colored boxes representing simple box edges" src="images/box-edges-simple.png"/>
601+
<p class="caption">Simple CSS Box Model Edges</p>
602+
</div>
603+
604+
And the same definitions apply to a more complex example with the same 100px square, but with these border, padding and margin properties:
605+
606+
<pre>
607+
<code class="css">
608+
border-radius: 20px 20px 20px 40px;
609+
border-width: 30px 10px 20px 10px;
610+
padding: 10px 20px 10px 10px;
611+
margin: 20px 10px 10px 10px;
612+
</code>
613+
</pre>
614+
615+
<div class="figure">
616+
<img alt="Colored boxes representing complex box edges" src="images/box-edges-complex.png"/>
617+
<p class="caption">Complex CSS Box Model Edges</p>
618+
</div>
619+
</div>
620+
559621
<h2 id="declaring-shapes">
560622
Declaring Shapes</h2>
561623

@@ -575,7 +637,7 @@ <h3 id="shape-outside-property">
575637

576638
<pre class='propdef'>
577639
Name: shape-outside
578-
Value: auto | <<box>> | [<<basic-shape>> || <<box>>] | <<image>>
640+
Value: auto | [<<basic-shape>> || <<box>>] | <<image>>
579641
Initial: auto
580642
Applies To: floats
581643
Inherited: no
@@ -593,10 +655,11 @@ <h3 id="shape-outside-property">
593655

594656
<dt><dfn><<box>></dfn></dt>
595657
<dd>
596-
The shape is computed based on one of
658+
If one of these values is specified by itself
659+
the shape is computed based on one of
597660
''margin-box'',
598661
''border-box'',
599-
''padding-box'' or
662+
''padding-box'' or
600663
''content-box''
601664
which use their respective boxes
602665
including curvature from border-radius,

‎css-shapes/examples/box-edge-complex.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<html>
2+
<head>
3+
<title>Complex box edge example</title>
4+
<style>
5+
div {
6+
position: absolute;
7+
left: 100px;
8+
top: 100px;
9+
}
10+
.box-demo {
11+
width: 100px;
12+
height: 100px;
13+
background-clip: content-box;
14+
background-color: lightblue;
15+
border: solid black 10px;
16+
border-radius: 20px 20px 20px 40px;
17+
border-width: 30px 10px 20px 10px;
18+
padding: 10px 20px 10px 10px;
19+
margin: 20px 10px 10px 10px;
20+
}
21+
.margin-box {
22+
width: 150px;
23+
height: 170px;
24+
background-color: #B29BA3;
25+
border: solid #FFF7A5 10px;
26+
border-width: 20px 10px 10px 10px;
27+
border-radius: 30px 30px 30px 50px / 40px 40px 30px 50px;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div class="margin-box"></div>
33+
<div class="box-demo"></div>
34+
</body>
35+
</html>

‎css-shapes/examples/box-edge-simple.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<html>
2+
<head>
3+
<title>Simple box edge example</title>
4+
<style>
5+
div {
6+
position: absolute;
7+
left: 100px;
8+
top: 100px;
9+
}
10+
.box-demo {
11+
width: 100px;
12+
height: 100px;
13+
background-clip: content-box;
14+
background-color: lightblue;
15+
border: solid black 10px;
16+
padding: 10px;
17+
margin: 10px;
18+
}
19+
.margin-box {
20+
width: 140px;
21+
height: 140px;
22+
background-color: #B29BA3;
23+
border: solid #FFF7A5 10px;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div class="margin-box"></div>
29+
<div class="box-demo"></div>
30+
</body>
31+
</html>

‎css-shapes/images/box-edges-complex.png‎

4.51 KB
Loading

‎css-shapes/images/box-edges-simple.png‎

1.4 KB
Loading

0 commit comments

Comments
 (0)