mobilecss/mask.html at master · estelle/mobilecss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Masking Example</title>
<link rel="stylesheet" href="solution.css"/>
<style>
table.mask {text-align: center;}
table.mask td {
  font-size: 2rem;
  font-family: arial;
  text-align: center;
  vertical-align: middle;
  padding: 0 10px;
}
</style>
</head>
<body>
<div style="float: left"></div>
<pre style="float: right; margin-top: 150px;font-size: 20px; overflow: hidden" contenteditable>
div {
  background-image:
     url(kittens.jpg);
}
div:after {
  content: '';
  top:0; bottom: 0;
  left: 0; right: 0;
  position: absolute;
  background-image:
     url(iphone_mask_large.jpg);
  -webkit-mask:
     url(iphone_mask_mask.png);
}


</pre>
<table class="mask">
  <tr><td>JPEG</td><td rowspan=2>+</td><td>MASK</td><td rowspan=2>&lt;</td><td>PNG</td></tr>
  <tr>
    <td>20.8KB</td><td>0.3KB</td><td>133KB</td></tr></table>
<p style="float: right;"><a href="iphone_mask_large.jpg" target="foo">JPG</a> | <a href="iphone_mask_mask.png" target="foo">Mask PNG</a></p>
</body>
</html>