Skip to content

Commit 21a9039

Browse files
rachelandrewrachelandrew
committed
Additional examples
Converted from the styling boxes section.
1 parent 32114ae commit 21a9039

File tree

3 files changed

+220
-0
lines changed

3 files changed

+220
-0
lines changed

‎learn/backgrounds-borders/background-blend-mode.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: background-blend-mode</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.box {
9+
width: 250px;
10+
height: 130px;
11+
padding: 10px;
12+
margin: 10px;
13+
display: inline-block;
14+
}
15+
</style>
16+
17+
<style class="editable">
18+
.box {
19+
background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
20+
background-color: green;
21+
}
22+
23+
.multiply {
24+
background-blend-mode: multiply;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<section class="preview">
31+
<div class="box"></div>
32+
<div class="box multiply"></div>
33+
</section>
34+
35+
<textarea class="playable playable-css" style="height: 220px;">
36+
.box {
37+
background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
38+
background-color: green;
39+
}
40+
41+
.multiply {
42+
background-blend-mode: multiply;
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 90px;">
47+
<div class="box"></div>
48+
<div class="box multiply"></div>
49+
</textarea>
50+
51+
<div class="playable-buttons">
52+
<input id="reset" type="button" value="Reset" />
53+
</div>
54+
</body>
55+
<script src="../playable.js"></script>
56+
</html>

‎learn/backgrounds-borders/mix-blend-mode.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: mix-blend-mode</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.container {
9+
width: 280px;
10+
height: 180px;
11+
margin: 10px;
12+
position: relative;
13+
display: inline-block;
14+
}
15+
16+
.box {
17+
width: 250px;
18+
height: 130px;
19+
padding: 10px;
20+
margin: 10px;
21+
}
22+
23+
.box:first-child {
24+
position: absolute;
25+
top: 10px;
26+
left: 0;
27+
}
28+
29+
.box:last-child {
30+
position: absolute;
31+
bottom: -10px;
32+
right: 0;
33+
z-index: -1;
34+
}
35+
</style>
36+
37+
<style class="editable">
38+
.box:first-child {
39+
background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
40+
background-color: green;
41+
}
42+
43+
.box:last-child {
44+
background-color: purple;
45+
}
46+
47+
.multiply-mix {
48+
mix-blend-mode: multiply;
49+
}
50+
</style>
51+
</head>
52+
53+
<body>
54+
<section class="preview">
55+
<div class="container">
56+
No mix blend mode
57+
<div class="box"></div>
58+
<div class="box"></div>
59+
</div>
60+
61+
<div class="container">
62+
Multiply mix
63+
<div class="box multiply-mix"></div>
64+
<div class="box"></div>
65+
</div>
66+
</section>
67+
68+
<textarea class="playable playable-css" style="height: 280px;">
69+
.box:first-child {
70+
background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
71+
background-color: green;
72+
}
73+
74+
.box:last-child {
75+
background-color: purple;
76+
}
77+
78+
.multiply-mix {
79+
mix-blend-mode: multiply;
80+
}
81+
</textarea>
82+
83+
<textarea class="playable playable-html" style="height: 200px;">
84+
<div class="container">
85+
No mix blend mode
86+
<div class="box"></div>
87+
<div class="box"></div>
88+
</div>
89+
90+
<div class="container">
91+
Multiply mix
92+
<div class="box multiply-mix"></div>
93+
<div class="box"></div>
94+
</div>
95+
</textarea>
96+
97+
<div class="playable-buttons">
98+
<input id="reset" type="button" value="Reset" />
99+
</div>
100+
</body>
101+
<script src="../playable.js"></script>
102+
</html>

‎learn/images/filter-text.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Images and other unusual elements: filters</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
p {
12+
margin: 1em 2em;
13+
padding: 20px;
14+
width: 100px;
15+
display: inline-block;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
p {
21+
border: 5px dashed red;
22+
}
23+
.filter {
24+
filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
25+
}
26+
27+
.box-shadow {
28+
box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
<section class="preview">
35+
<p class="filter">Filter</p>
36+
<p class="box-shadow">Box shadow</p>
37+
</section>
38+
39+
<textarea class="playable playable-css" style="height: 220px;">
40+
p {
41+
border: 5px dashed red;
42+
}
43+
.filter {
44+
filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
45+
}
46+
47+
.box-shadow {
48+
box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
49+
}
50+
</textarea>
51+
52+
<textarea class="playable playable-html" style="height: 120px;">
53+
<p class="filter">Filter</p>
54+
<p class="box-shadow">Box shadow</p>
55+
</textarea>
56+
57+
<div class="playable-buttons">
58+
<input id="reset" type="button" value="Reset" />
59+
</div>
60+
</body>
61+
<script src="../playable.js"></script>
62+
</html>

0 commit comments

Comments
 (0)