Ajax Loader
×
HTML 
<div class="page-curl shadow-bottom">
1
<div class="page-curl shadow-bottom">
2
  <h2>Bottom shadow, both sides</h2>
3
  <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
4
</div>
5
 
6
<div class="page-curl shadow-bottom shadow-right">
7
  <h2>Bottom shadow, right side</h2>
8
  <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
9
</div>
10
 
11
 
12
<div class="page-curl shadow-bottom shadow-left">
13
  <h2>Bottom shadow, left side</h2>
14
  <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
15
</div>
16
 
17
 
18
<div class="page-curl shadow-top-bottom shadow-right">
19
  <h2>Top &amp; Bottom shadow, right side</h2>
20
  <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
21
</div>
22
 
23
 
24
<div class="page-curl shadow-top-bottom shadow-left">
25
  <h2>Top &amp; Bottom shadow, left side</h2>
26
  <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
27
</div>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
1
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
2
 
3
html {
4
  background: #DEF;
5
  background: -moz-linear-gradient(45deg, #EFF, #DEF);
6
  background: -ms-linear-gradient(45deg, #EFF, #DEF);
7
  background: -webkit-linear-gradient(45deg, #EFF, #DEF);
8
  background: linear-gradient(45deg, #EFF, #DEF);
9
  min-height: 100%;
10
  font-family: "Open Sans", Helvetica, sans-serif;
11
  font-weight: 300;
12
}
13
 
14
h1, h2 {
15
  font-weight: 400;
16
  text-shadow: 0 1px 0 #FFF;
17
}
18
 
19
h1 {
20
  width: 800px;
21
  margin: 0 auto;
22
}
23
 
24
p {
25
  font: 300 13px/20px Arial,sans-serif;
26
  color: #888;
27
}
28
 
29
.page-curl {
30
  background: #FFFFFF;
31
  background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
32
  background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
33
  background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
34
  background: linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
35
  border: 1px solid #777777;
36
  -moz-border-radius: 6px 6px 6px 6px;
37
  -webkit-border-radius: 6px 6px 6px 6px;
38
  border-radius: 6px 6px 6px 6px;
39
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
40
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
41
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
42
  margin: 50px auto;
43
  padding: 15px;
44
  position: relative;
45
  width: 800px;
46
}
47
 
48
.page-curl:before, .page-curl:after {
49
  background: none;
50
  bottom: 12px;
51
  -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
52
  -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
53
  box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
54
  content: "";
55
  height: 10px;
56
  left: 12px;
57
  position: absolute;
58
  width: 40%;
59
  z-index: -1;
60
  -moz-transform: skew(-4deg) rotate(-4deg);
61
  -webkit-transform: skew(-4deg) rotate(-4deg);
62
  transform: skew(-4deg) rotate(-4deg);
63
}
64
 
65
.page-curl:after {
66
  -moz-transform: skew(4deg) rotate(4deg);
67
  -webkit-transform: skew(4deg) rotate(4deg);
68
  transform: skew(4deg) rotate(4deg);
69
  left: auto;
70
  right: 12px;
71
}
72
 
73
.page-curl.shadow-left {
74
  background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
75
  background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
76
  background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
77
  background: linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
78
}
79
 
80
.page-curl.shadow-right {
81
  background: -moz-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
82
  background: -ms-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
83
  background: -webkit-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
84
  background: linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
85
}
86
 
87
.shadow-bottom:before, .shadow-bottom:after {
88
  top: auto;
89
  bottom: 12px;
90
  -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
91
  -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
92
  box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
93
}
94
 
95
.shadow-left:after {
96
  display: none;
97
}
98
 
99
.shadow-right:before {
100
  display: none;
101
}
102
 
103
.shadow-top-bottom.shadow-left:after {
104
  display: block;
105
  bottom: auto;
106
  top: 15px;
107
  right: auto;
108
  left: 12px;
109
  -moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
110
  -webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
111
  box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
112
}
113
 
114
.shadow-top-bottom.shadow-right:before {
115
  display: block;
116
  bottom: auto;
117
  top: 15px;
118
  right: 12px;
119
  left: auto;
120
  -moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
121
  -webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
122
  box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
123
}
 

Untitled

CSSDeck G+