Skip to content

Commit e6206ab

Browse files
rachelandrewrachelandrew
committed
masking examples
1 parent d20ac2f commit e6206ab

File tree

6 files changed

+656
-0
lines changed

6 files changed

+656
-0
lines changed

‎masking/mask-border-diamonds.png

289 Bytes
Loading

‎masking/mask-border.html

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Masking: the mask-origin property</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: 260px;
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 100px
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+
.masked {
60+
width: 200px;
61+
background-color: lavender;
62+
border: 18px solid salmon;
63+
padding: 10px;
64+
}
65+
66+
</style>
67+
<style class="editable">
68+
.masked {
69+
-webkit-mask-box-image: url("mask-border-diamonds.png")
70+
30 fill / /* slice */
71+
20px / /* width */
72+
1px /* outset */
73+
round; /* repeat */
74+
75+
mask-border:
76+
url("mask-border-diamonds.png")
77+
30 fill / /* slice */
78+
20px / /* width */
79+
1px /* outset */
80+
round; /* repeat */
81+
}
82+
</style>
83+
</head>
84+
85+
<body>
86+
<section>
87+
<div class="masked">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?
88+
</div>
89+
90+
</section>
91+
92+
<textarea class="playable-css" style="height: 260px">
93+
.masked {
94+
-webkit-mask-box-image: url("mask-border-diamonds.png")
95+
30 fill / /* slice */
96+
20px / /* width */
97+
1px /* outset */
98+
round; /* repeat */
99+
100+
mask-border:
101+
url("mask-border-diamonds.png")
102+
30 fill / /* slice */
103+
20px / /* width */
104+
1px /* outset */
105+
round; /* repeat */
106+
}
107+
</textarea>
108+
<textarea id="code" class="playable-html">
109+
<div class="masked">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?</div>
110+
111+
</textarea>
112+
<div class="playable-buttons">
113+
<input id="reset" type="button" value="Reset">
114+
</div>
115+
</body>
116+
<script>
117+
var section = document.querySelector('section');
118+
var editable = document.querySelector('.editable');
119+
var textareaHTML = document.querySelector('.playable-html');
120+
var textareaCSS = document.querySelector('.playable-css');
121+
var reset = document.getElementById('reset');
122+
var htmlCode = textareaHTML.value;
123+
var cssCode = textareaCSS.value;
124+
125+
function fillCode() {
126+
editable.innerHTML = textareaCSS.value;
127+
section.innerHTML = textareaHTML.value;
128+
}
129+
130+
reset.addEventListener('click', function () {
131+
textareaHTML.value = htmlCode;
132+
textareaCSS.value = cssCode;
133+
fillCode();
134+
});
135+
136+
textareaHTML.addEventListener('input', fillCode);
137+
textareaCSS.addEventListener('input', fillCode);
138+
window.addEventListener('load', fillCode);
139+
140+
141+
</script>
142+
143+
</html>

‎masking/mask-composite.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Masking: the mask-origin property</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: 260px;
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 100px
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+
.masked {
60+
width: 100px;
61+
height: 100px;
62+
background-color: #8cffa0;
63+
}
64+
65+
</style>
66+
<style class="editable">
67+
.masked {
68+
-webkit-mask-image: url(MDN.svg),url(star.svg);
69+
mask-image: url(MDN.svg),url(star.svg);
70+
-webkit-mask-size: 100% 100%;
71+
mask-size: 100% 100%;
72+
-webkit-mask-composite: source-over;
73+
mask-composite: add;
74+
}
75+
</style>
76+
</head>
77+
78+
<body>
79+
<section>
80+
<div class="masked">
81+
</div>
82+
83+
</section>
84+
85+
<textarea class="playable-css" style="height: 150px">
86+
.masked {
87+
-webkit-mask-image: url(MDN.svg),url(star.svg);
88+
mask-image: url(MDN.svg),url(star.svg);
89+
-webkit-mask-size: 100% 100%;
90+
mask-size: 100% 100%;
91+
-webkit-mask-composite: source-over;
92+
mask-composite: add;
93+
}
94+
</textarea>
95+
<textarea id="code" class="playable-html">
96+
<div class="masked"></div>
97+
98+
</textarea>
99+
<div class="playable-buttons">
100+
<input id="reset" type="button" value="Reset">
101+
</div>
102+
</body>
103+
<script>
104+
var section = document.querySelector('section');
105+
var editable = document.querySelector('.editable');
106+
var textareaHTML = document.querySelector('.playable-html');
107+
var textareaCSS = document.querySelector('.playable-css');
108+
var reset = document.getElementById('reset');
109+
var htmlCode = textareaHTML.value;
110+
var cssCode = textareaCSS.value;
111+
112+
function fillCode() {
113+
editable.innerHTML = textareaCSS.value;
114+
section.innerHTML = textareaHTML.value;
115+
}
116+
117+
reset.addEventListener('click', function () {
118+
textareaHTML.value = htmlCode;
119+
textareaCSS.value = cssCode;
120+
fillCode();
121+
});
122+
123+
textareaHTML.addEventListener('input', fillCode);
124+
textareaCSS.addEventListener('input', fillCode);
125+
window.addEventListener('load', fillCode);
126+
127+
128+
</script>
129+
130+
</html>

0 commit comments

Comments
 (0)