-
Notifications
You must be signed in to change notification settings - Fork 64
/
Copy pathmultiple.css
64 lines (55 loc) · 1.4 KB
/
multiple.css
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.multiple-desktop {
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
/* http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html */
.multiple-desktop-text {
background: -webkit-linear-gradient(transparent, transparent);
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
.multiple-mobile-wrapper {
position: relative;
height: 100%;
}
/* http://stackoverflow.com/a/23859719/1221082
* http://stackoverflow.com/a/23795792/1221082
*/
.multiple-mobile {
/* old browsers */
clip: rect(0 auto auto 0);
clip: rect(0, auto, auto, 0);
/* ios workaround */
-webkit-mask-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
/* new browsers */
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.multiple-mobile-content {
height: 100%;
}
.multiple-mobile:before {
content: '';
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}