Skip to content

Commit d87c868

Browse files
rachelandrewrachelandrew
committed
backgrounds and borders files
1 parent b939b18 commit d87c868

File tree

14 files changed

+619
-0
lines changed

14 files changed

+619
-0
lines changed

‎learn/backgrounds-borders/background-image.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: background-image</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
}
15+
16+
.box {
17+
width: 200px;
18+
height: 100px;
19+
padding: .5em;
20+
border: 1px solid #ccc;
21+
margin: 20px;
22+
}
23+
</style>
24+
25+
<style class="editable">
26+
.a {
27+
background-image: url(balloons.jpg);
28+
}
29+
30+
.b {
31+
background-image: url(star.png);
32+
}
33+
34+
</style>
35+
</head>
36+
37+
<body>
38+
<section class="preview">
39+
<div class="wrapper">
40+
<div class="box a"></div>
41+
<div class="box b"></div>
42+
</div>
43+
44+
</section>
45+
46+
<textarea class="playable playable-css" style="height: 220px;">
47+
.a {
48+
background-image: url(balloons.jpg);
49+
}
50+
51+
.b {
52+
background-image: url(star.png);
53+
}
54+
</textarea>
55+
56+
<textarea class="playable playable-html" style="height: 130px;">
57+
<div class="wrapper">
58+
<div class="box a"></div>
59+
<div class="box b"></div>
60+
</div>
61+
</textarea>
62+
63+
<div class="playable-buttons">
64+
<input id="reset" type="button" value="Reset" />
65+
</div>
66+
</body>
67+
<script src="../playable.js"></script>
68+
</html>

‎learn/backgrounds-borders/background.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: background</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.box {
12+
width: 500px;
13+
height: 300px;
14+
padding: .5em;
15+
}
16+
</style>
17+
18+
<style class="editable">
19+
.box {
20+
background:
21+
linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
22+
url(big-star.png) center no-repeat,
23+
rebeccapurple;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<div class="box"></div>
31+
32+
</section>
33+
34+
<textarea class="playable playable-css" style="height: 220px;">
35+
.box {
36+
background:
37+
linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
38+
url(big-star.png) center no-repeat,
39+
rebeccapurple;
40+
}
41+
</textarea>
42+
43+
<textarea class="playable playable-html" style="height: 130px;">
44+
<div class="box"></div>
45+
</textarea>
46+
47+
<div class="playable-buttons">
48+
<input id="reset" type="button" value="Reset" />
49+
</div>
50+
</body>
51+
<script src="../playable.js"></script>
52+
</html>

‎learn/backgrounds-borders/balloons.jpg‎

107 KB
Loading

‎learn/backgrounds-borders/big-star.png‎

981 Bytes
Loading

‎learn/backgrounds-borders/borders.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: border</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.box {
12+
width: 500px;
13+
padding: .5em;
14+
}
15+
</style>
16+
17+
<style class="editable">
18+
.box {
19+
background-color: #567895;
20+
border: 5px solid #0b385f;
21+
border-bottom-style: dashed;
22+
color: #fff;
23+
}
24+
25+
h2 {
26+
border-top: 2px dotted rebeccapurple;
27+
border-bottom: 1em double rgb(24, 163, 78);
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<section class="preview">
34+
<div class="box">
35+
<h2>Borders</h2>
36+
<p>Try changing the borders.</p>
37+
</div>
38+
39+
</section>
40+
41+
<textarea class="playable playable-css" style="height: 220px;">
42+
.box {
43+
background-color: #567895;
44+
border: 5px solid #0b385f;
45+
border-bottom-style: dashed;
46+
color: #fff;
47+
}
48+
49+
h2 {
50+
border-top: 2px dotted rebeccapurple;
51+
border-bottom: 1em double rgb(24, 163, 78);
52+
}
53+
</textarea>
54+
55+
<textarea class="playable playable-html" style="height: 130px;">
56+
<div class="box">
57+
<h2>Borders</h2>
58+
<p>Try changing the borders.</p>
59+
</div>
60+
</textarea>
61+
62+
<div class="playable-buttons">
63+
<input id="reset" type="button" value="Reset" />
64+
</div>
65+
</body>
66+
<script src="../playable.js"></script>
67+
</html>

‎learn/backgrounds-borders/color.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: background-color</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.box {
12+
width: 500px;
13+
padding: .5em;
14+
}
15+
</style>
16+
17+
<style class="editable">
18+
.box {
19+
background-color: #567895;
20+
}
21+
22+
h2 {
23+
background-color: black;
24+
color: white;
25+
}
26+
27+
span {
28+
background-color: rgba(255,255,255,.5);
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
<section class="preview">
35+
<div class="box">
36+
<h2>Background Colors</h2>
37+
<p>Try changing the background <span>colors</span>.</p>
38+
</div>
39+
40+
</section>
41+
42+
<textarea class="playable playable-css" style="height: 220px;">
43+
.box {
44+
background-color: #567895;
45+
}
46+
47+
h2 {
48+
background-color: black;
49+
color: white;
50+
}
51+
span {
52+
background-color: rgba(255,255,255,.5);
53+
}
54+
</textarea>
55+
56+
<textarea class="playable playable-html" style="height: 130px;">
57+
<div class="box">
58+
<h2>Background Colors</h2>
59+
<p>Try changing the background <span>colors</span>.</p>
60+
</div>
61+
</textarea>
62+
63+
<div class="playable-buttons">
64+
<input id="reset" type="button" value="Reset" />
65+
</div>
66+
</body>
67+
<script src="../playable.js"></script>
68+
</html>

‎learn/backgrounds-borders/gradients.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: gradients</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
}
15+
16+
.box {
17+
width: 200px;
18+
height: 100px;
19+
padding: .5em;
20+
border: 1px solid #ccc;
21+
margin: 20px;
22+
}
23+
</style>
24+
25+
<style class="editable">
26+
.a {
27+
background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
28+
}
29+
30+
.b {
31+
background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
32+
background-size: 100px 50px;
33+
}
34+
35+
</style>
36+
</head>
37+
38+
<body>
39+
<section class="preview">
40+
<div class="wrapper">
41+
<div class="box a"></div>
42+
<div class="box b"></div>
43+
</div>
44+
45+
</section>
46+
47+
<textarea class="playable playable-css" style="height: 220px;">
48+
.a {
49+
background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
50+
}
51+
52+
.b {
53+
background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
54+
background-size: 100px 50px;
55+
}
56+
</textarea>
57+
58+
<textarea class="playable playable-html" style="height: 130px;">
59+
<div class="wrapper">
60+
<div class="box a"></div>
61+
<div class="box b"></div>
62+
</div>
63+
</textarea>
64+
65+
<div class="playable-buttons">
66+
<input id="reset" type="button" value="Reset" />
67+
</div>
68+
</body>
69+
<script src="../playable.js"></script>
70+
</html>

‎learn/backgrounds-borders/multiple-background-image.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: multiple background-image</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
}
15+
16+
.box {
17+
width: 300px;
18+
height: 100px;
19+
padding: .5em;
20+
border: 1px solid #ccc;
21+
margin: 20px;
22+
}
23+
</style>
24+
25+
<style class="editable">
26+
.box {
27+
background-image: url(star.png), url(big-star.png);
28+
}
29+
30+
</style>
31+
</head>
32+
33+
<body>
34+
<section class="preview">
35+
<div class="wrapper">
36+
<div class="box"></div>
37+
</div>
38+
39+
</section>
40+
41+
<textarea class="playable playable-css" style="height: 120px;">
42+
.box {
43+
background-image: url(star.png), url(big-star.png);
44+
}
45+
</textarea>
46+
47+
<textarea class="playable playable-html" style="height: 130px;">
48+
<div class="wrapper">
49+
<div class="box"></div>
50+
</div>
51+
</textarea>
52+
53+
<div class="playable-buttons">
54+
<input id="reset" type="button" value="Reset" />
55+
</div>
56+
</body>
57+
<script src="../playable.js"></script>
58+
</html>

0 commit comments

Comments
 (0)