Skip to content

Commit 041fdf1

Browse files
rachelandrewrachelandrew
committed
moving mask-position example
1 parent f8056e8 commit 041fdf1

File tree

1 file changed

+137
-0
lines changed

1 file changed

+137
-0
lines changed

‎masking/mask-position.html

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Masking: the mask-position 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: 200px;
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+
#wrapper {
60+
border: 1px solid black;
61+
width: 250px;
62+
height: 250px;
63+
}
64+
65+
</style>
66+
<style class="editable">
67+
.masked {
68+
width: 250px;
69+
height: 250px;
70+
background: blue linear-gradient(red, blue);
71+
-webkit-mask-image: url(./star.svg);
72+
-webkit-mask-repeat: no-repeat;
73+
-webkit-mask-position: top right;
74+
mask-image: url(./star.svg);
75+
mask-repeat: no-repeat;
76+
mask-position: top right;
77+
margin-bottom: 10px;
78+
}
79+
</style>
80+
</head>
81+
82+
<body>
83+
<section>
84+
<div id="wrapper">
85+
<div class="masked"></div>
86+
</div>
87+
</section>
88+
89+
<textarea class="playable-css">
90+
.masked {
91+
width: 250px;
92+
height: 250px;
93+
background: blue linear-gradient(red, blue);
94+
-webkit-mask-image: url(./star.svg);
95+
-webkit-mask-repeat: no-repeat;
96+
-webkit-mask-position: top right;
97+
mask-image: url(./star.svg);
98+
mask-repeat: no-repeat;
99+
mask-position: top right;
100+
margin-bottom: 10px;
101+
}</textarea>
102+
<textarea id="code" class="playable-html">
103+
<div class="masked"></div>
104+
105+
</textarea>
106+
<div class="playable-buttons">
107+
<input id="reset" type="button" value="Reset">
108+
</div>
109+
</body>
110+
<script>
111+
var section = document.querySelector('section');
112+
var editable = document.querySelector('.editable');
113+
var textareaHTML = document.querySelector('.playable-html');
114+
var textareaCSS = document.querySelector('.playable-css');
115+
var reset = document.getElementById('reset');
116+
var htmlCode = textareaHTML.value;
117+
var cssCode = textareaCSS.value;
118+
119+
function fillCode() {
120+
editable.innerHTML = textareaCSS.value;
121+
section.innerHTML = textareaHTML.value;
122+
}
123+
124+
reset.addEventListener('click', function () {
125+
textareaHTML.value = htmlCode;
126+
textareaCSS.value = cssCode;
127+
fillCode();
128+
});
129+
130+
textareaHTML.addEventListener('input', fillCode);
131+
textareaCSS.addEventListener('input', fillCode);
132+
window.addEventListener('load', fillCode);
133+
134+
135+
</script>
136+
137+
</html>

0 commit comments

Comments
 (0)