Skip to content

Commit 74338e5

Browse files
rachelandrewrachelandrew
committed
tidying up examples, adding Box Values examples
1 parent 117eec8 commit 74338e5

File tree

9 files changed

+683
-3
lines changed

9 files changed

+683
-3
lines changed

‎shapes/box/border-box.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Shapes Box values: Border Box</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: 140px
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+
.shape {
60+
background-color: rebeccapurple;
61+
height: 80px;
62+
width: 80px;
63+
}
64+
65+
</style>
66+
<style class="editable">
67+
.shape {
68+
padding: 20px;
69+
margin: 20px;
70+
border: 10px solid black;
71+
border-radius: 50%;
72+
float: left;
73+
shape-outside: border-box;
74+
}
75+
</style>
76+
</head>
77+
78+
<body>
79+
<section>
80+
<div class="box">
81+
<div class="shape"></div>
82+
<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.</p>
83+
</div>
84+
85+
</section>
86+
<textarea class="playable-css">
87+
.shape {
88+
padding: 20px;
89+
margin: 20px;
90+
border: 10px solid black;
91+
border-radius: 50%;
92+
float: left;
93+
shape-outside: border-box;
94+
}
95+
</textarea>
96+
<textarea id="code" class="playable-html">
97+
<div class="box">
98+
<div class="shape"></div>
99+
<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.</p>
100+
</div>
101+
</textarea>
102+
<div class="playable-buttons">
103+
<input id="reset" type="button" value="Reset">
104+
</div>
105+
</body>
106+
<script>
107+
var section = document.querySelector('section');
108+
var editable = document.querySelector('.editable');
109+
var textareaHTML = document.querySelector('.playable-html');
110+
var textareaCSS = document.querySelector('.playable-css');
111+
var reset = document.getElementById('reset');
112+
var htmlCode = textareaHTML.value;
113+
var cssCode = textareaCSS.value;
114+
115+
function fillCode() {
116+
editable.innerHTML = textareaCSS.value;
117+
section.innerHTML = textareaHTML.value;
118+
}
119+
120+
reset.addEventListener('click', function () {
121+
textareaHTML.value = htmlCode;
122+
textareaCSS.value = cssCode;
123+
fillCode();
124+
});
125+
126+
textareaHTML.addEventListener('input', fillCode);
127+
textareaCSS.addEventListener('input', fillCode);
128+
window.addEventListener('load', fillCode);
129+
</script>
130+
131+
</html>

‎shapes/box/bottom-margin-box.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Shapes Box values: Margin Box</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: 200px
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+
.shape-left,
60+
.shape-right {
61+
height: 100px;
62+
width: 100px;
63+
}
64+
65+
.box {
66+
text-align: justify;
67+
}
68+
69+
</style>
70+
<style class="editable">
71+
72+
.shape-left {
73+
margin: 0 20px 20px 0;
74+
border-bottom-right-radius: 100%;
75+
float: left;
76+
shape-outside: margin-box;
77+
}
78+
.shape-right {
79+
margin: 0 20px 20px;
80+
border-bottom-left-radius: 100%;
81+
float: right;
82+
shape-outside: margin-box;
83+
}
84+
</style>
85+
</head>
86+
87+
<body>
88+
<section>
89+
<div class="box">
90+
<div class="shape-left"></div>
91+
<div class="shape-right"></div>
92+
<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.</p>
93+
</div>
94+
95+
</section>
96+
<textarea class="playable-css">
97+
.shape-left {
98+
margin: 0 20px 20px 0;
99+
border-bottom-right-radius: 100%;
100+
float: left;
101+
shape-outside: margin-box;
102+
}
103+
.shape-right {
104+
margin: 0 20px 20px;
105+
border-bottom-left-radius: 100%;
106+
float: right;
107+
shape-outside: margin-box;
108+
}
109+
</textarea>
110+
<textarea id="code" class="playable-html">
111+
<div class="box">
112+
<div class="shape-left"></div>
113+
<div class="shape-right"></div>
114+
<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.</p>
115+
</div>
116+
</textarea>
117+
<div class="playable-buttons">
118+
<input id="reset" type="button" value="Reset">
119+
</div>
120+
</body>
121+
<script>
122+
var section = document.querySelector('section');
123+
var editable = document.querySelector('.editable');
124+
var textareaHTML = document.querySelector('.playable-html');
125+
var textareaCSS = document.querySelector('.playable-css');
126+
var reset = document.getElementById('reset');
127+
var htmlCode = textareaHTML.value;
128+
var cssCode = textareaCSS.value;
129+
130+
function fillCode() {
131+
editable.innerHTML = textareaCSS.value;
132+
section.innerHTML = textareaHTML.value;
133+
}
134+
135+
reset.addEventListener('click', function () {
136+
textareaHTML.value = htmlCode;
137+
textareaCSS.value = cssCode;
138+
fillCode();
139+
});
140+
141+
textareaHTML.addEventListener('input', fillCode);
142+
textareaCSS.addEventListener('input', fillCode);
143+
window.addEventListener('load', fillCode);
144+
</script>
145+
146+
</html>

0 commit comments

Comments
 (0)