-
Notifications
You must be signed in to change notification settings - Fork 1
/
wrapper-paper.css
46 lines (45 loc) · 1.29 KB
/
wrapper-paper.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
/*************
Paper
curled corners from http://matthamm.com/box-shadow-curl.html
*************/
#aswrapper {
padding: 40px;
margin: 0 auto;
}
#aswrapper.paper {
position: relative;
background: #fff url(../images/bkgd-paper.jpg);
border: 1px solid #cacfc5;
/*height: 390px; */
padding: 40px;
margin: 0 auto;
-moz-border-radius:0;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
.paper:before, .paper:after {
content: '';
z-index: -1;
position: absolute;
left: 23px;
bottom: 13px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
height: 55%;
-webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
}
.paper:after {
left: auto;
right: 23px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
}