Skip to content

Commit 117eec8

Browse files
rachelandrewrachelandrew
committed
Shapes docs examples
1 parent 8ae21e4 commit 117eec8

File tree

11 files changed

+884
-0
lines changed

11 files changed

+884
-0
lines changed

‎shapes/images/blue-sky.png

73.6 KB
Loading

‎shapes/images/round-balloon-transparent.png

67.6 KB
Loading

‎shapes/images/round-balloon.png

21.8 KB
Loading

‎shapes/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Shapes Examples</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<h1>Shapes Examples</h1>
10+
<p>These examples are to accompany the Shapes articles on MDN.</p>
11+
12+
<h2>Basic concepts</h2>
13+
14+
<ol>
15+
<li><a href="overview/circle.html">circle()</a></li>
16+
<li><a href="overview/box.html">Box values</a></li>
17+
<li><a href="overview/image.html">Images</a></li>
18+
<li><a href="overview/shape-margin.html">shape-margin</a></li>
19+
<li><a href="overview/threshold.html">shape-image-threshold</a></li>
20+
<li><a href="overview/generated-content.html">Generated Content</a></li>
21+
<li><a href="overview/clip-path.html">clip-path</a></li>
22+
</ol>
23+
24+
25+
</body>
26+
</html>

‎shapes/overview/box.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Shapes Overview: Box values</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
.shape {
62+
background-color: rebeccapurple;
63+
height: 150px;
64+
width: 150px;
65+
padding: 20px;
66+
margin: 20px;
67+
border-radius: 50%;
68+
float: left;
69+
shape-outside: border-box;
70+
}
71+
</style>
72+
</head>
73+
74+
<body>
75+
<section>
76+
<div class="box">
77+
<div class="shape"></div>
78+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact; but on this particular occasion, as Stephen, the younger of the brothers, sat and gazed at the familiar sight, the question flashed across his mind, “What is the hidden power that makes those curling smoke-wreaths rise upwards, and10 could I not employ it to make other things rise also?”</p>
79+
</div>
80+
81+
</section>
82+
<textarea class="playable-css">
83+
.shape {
84+
background-color: rebeccapurple;
85+
height: 150px;
86+
width: 150px;
87+
padding: 20px;
88+
margin: 20px;
89+
border-radius: 50%;
90+
float: left;
91+
shape-outside: border-box;
92+
}
93+
</textarea>
94+
<textarea id="code" class="playable-html">
95+
<div class="box">
96+
<div class="shape"></div>
97+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact; but on this particular occasion, as Stephen, the younger of the brothers, sat and gazed at the familiar sight, the question flashed across his mind, “What is the hidden power that makes those curling smoke-wreaths rise upwards, and10 could I not employ it to make other things rise also?”</p>
98+
</div>
99+
</textarea>
100+
<div class="playable-buttons">
101+
<input id="reset" type="button" value="Reset">
102+
</div>
103+
</body>
104+
<script>
105+
var section = document.querySelector('section');
106+
var editable = document.querySelector('.editable');
107+
var textareaHTML = document.querySelector('.playable-html');
108+
var textareaCSS = document.querySelector('.playable-css');
109+
var reset = document.getElementById('reset');
110+
var htmlCode = textareaHTML.value;
111+
var cssCode = textareaCSS.value;
112+
113+
function fillCode() {
114+
editable.innerHTML = textareaCSS.value;
115+
section.innerHTML = textareaHTML.value;
116+
}
117+
118+
reset.addEventListener('click', function () {
119+
textareaHTML.value = htmlCode;
120+
textareaCSS.value = cssCode;
121+
fillCode();
122+
});
123+
124+
textareaHTML.addEventListener('input', fillCode);
125+
textareaCSS.addEventListener('input', fillCode);
126+
window.addEventListener('load', fillCode);
127+
</script>
128+
129+
</html>

‎shapes/overview/circle.html

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Shapes Overview: circle()</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
img {
62+
float: left;
63+
shape-outside: circle(50%);
64+
}
65+
</style>
66+
</head>
67+
68+
<body>
69+
<section>
70+
<div class="box">
71+
<img src="../images/round-balloon.png" alt="balloon">
72+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact; but on this particular occasion, as Stephen, the younger of the brothers, sat and gazed at the familiar sight, the question flashed across his mind, “What is the hidden power that makes those curling smoke-wreaths rise upwards, and10 could I not employ it to make other things rise also?”</p>
73+
</div>
74+
75+
</section>
76+
<textarea class="playable-css">
77+
img {
78+
float: left;
79+
shape-outside: circle(50%);
80+
}
81+
</textarea>
82+
<textarea id="code" class="playable-html">
83+
<div class="box">
84+
<img src="../images/round-balloon.png" alt="balloon">
85+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact; but on this particular occasion, as Stephen, the younger of the brothers, sat and gazed at the familiar sight, the question flashed across his mind, “What is the hidden power that makes those curling smoke-wreaths rise upwards, and10 could I not employ it to make other things rise also?”</p>
86+
</div>
87+
</textarea>
88+
<div class="playable-buttons">
89+
<input id="reset" type="button" value="Reset">
90+
</div>
91+
</body>
92+
<script>
93+
var section = document.querySelector('section');
94+
var editable = document.querySelector('.editable');
95+
var textareaHTML = document.querySelector('.playable-html');
96+
var textareaCSS = document.querySelector('.playable-css');
97+
var reset = document.getElementById('reset');
98+
var htmlCode = textareaHTML.value;
99+
var cssCode = textareaCSS.value;
100+
101+
function fillCode() {
102+
editable.innerHTML = textareaCSS.value;
103+
section.innerHTML = textareaHTML.value;
104+
}
105+
106+
reset.addEventListener('click', function () {
107+
textareaHTML.value = htmlCode;
108+
textareaCSS.value = cssCode;
109+
fillCode();
110+
});
111+
112+
textareaHTML.addEventListener('input', fillCode);
113+
textareaCSS.addEventListener('input', fillCode);
114+
window.addEventListener('load', fillCode);
115+
</script>
116+
117+
</html>

‎shapes/overview/clip-path.html

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Shapes Overview: clip-path</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
img {
62+
float: left;
63+
shape-outside: ellipse(40% 50%);
64+
clip-path: ellipse(40% 50%);
65+
}
66+
</style>
67+
</head>
68+
69+
<body>
70+
<section>
71+
<div class="box">
72+
<img src="../images/blue-sky.png" alt="balloon">
73+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact; but on this particular occasion, as Stephen, the younger of the brothers, sat and gazed at the familiar sight, the question flashed across his mind, “What is the hidden power that makes those curling smoke-wreaths rise upwards, and10 could I not employ it to make other things rise also?”</p>
74+
</div>
75+
76+
</section>
77+
<textarea class="playable-css">
78+
img {
79+
float: left;
80+
shape-outside: ellipse(40% 50%);
81+
clip-path: ellipse(40% 50%);
82+
}
83+
</textarea>
84+
<textarea id="code" class="playable-html">
85+
<div class="box">
86+
<img src="../images/blue-sky.png" alt="balloon">
87+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact; but on this particular occasion, as Stephen, the younger of the brothers, sat and gazed at the familiar sight, the question flashed across his mind, “What is the hidden power that makes those curling smoke-wreaths rise upwards, and10 could I not employ it to make other things rise also?”</p>
88+
</div>
89+
</textarea>
90+
<div class="playable-buttons">
91+
<input id="reset" type="button" value="Reset">
92+
</div>
93+
</body>
94+
<script>
95+
var section = document.querySelector('section');
96+
var editable = document.querySelector('.editable');
97+
var textareaHTML = document.querySelector('.playable-html');
98+
var textareaCSS = document.querySelector('.playable-css');
99+
var reset = document.getElementById('reset');
100+
var htmlCode = textareaHTML.value;
101+
var cssCode = textareaCSS.value;
102+
103+
function fillCode() {
104+
editable.innerHTML = textareaCSS.value;
105+
section.innerHTML = textareaHTML.value;
106+
}
107+
108+
reset.addEventListener('click', function () {
109+
textareaHTML.value = htmlCode;
110+
textareaCSS.value = cssCode;
111+
fillCode();
112+
});
113+
114+
textareaHTML.addEventListener('input', fillCode);
115+
textareaCSS.addEventListener('input', fillCode);
116+
window.addEventListener('load', fillCode);
117+
</script>
118+
119+
</html>

0 commit comments

Comments
 (0)