1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>drop-shadows</title>
6 <style>
7 body {
8 padding: 20px 0 0;
9 font: 14px/1.5 Arial, sans-serif;
10 text-align: center;
11 color: #333;
12 background: #ccc;
13 }
14
15 .drop-shadow {
16 position: relative;
17 width: 45%;
18 padding: 1em;
19 margin: 2em auto 5em;
20 background: #fff;
21 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
22 }
23
24 .drop-shadow:before,
25 .drop-shadow:after {
26 content: "";
27 position: absolute;
28 z-index: -2;
29 bottom: 15px;
30 left: 10px;
31 width: 50%;
32 height: 20%;
33 }
34
35 .drop-shadow:after {
36 right: 10px;
37 left: auto;
38 }
39
40 .round {
41 border-radius: 4px;
42 }
43
44 .round:before,
45 .round:after {
46 max-width: 300px;
47 box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
48 transform: rotate(-3deg);
49 }
50
51 .round:after {
52 transform: rotate(3deg);
53 }
54
55 .curls {
56 border: 1px solid #efefef;
57 border-radius: 0 0 120px 120px / 0 0 6px 6px;
58 }
59
60 .curls:before,
61 .curls:after {
62 bottom: 12px;
63 max-width: 200px;
64 height: 55%;
65 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
66 transform: skew(-8deg) rotate(-4deg);
67 }
68
69 .curls:after {
70 transform: skew(8deg) rotate(4deg);
71 }
72
73 .perspective:before {
74 left: 28px;
75 bottom: 8px;
76 max-width: 200px;
77 height: 35%;
78 box-shadow: -60px 5px 8px rgba(0, 0, 0, 0.4);
79 transform: skew(50deg);
80 }
81
82 .perspective:after {
83 display: none;
84 }
85
86 .raised:before {
87 width: auto;
88 right: 10px;
89 left: 10px;
90 bottom: 0;
91 box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
92 }
93
94 .rotated {
95 transform: rotate(-3deg);
96 }
97
98 .rotated *:first-child:before {
99 content: "";
100 position: absolute;
101 z-index: -1;
102 top: 0;
103 bottom: 0;
104 left: 0;
105 right: 0;
106 background: #fff;
107 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
108 }
109
110 </style>
111 </head>
112 <body>
113
114 <div class="drop-shadow round">
115 <h1>CSS drop-shadows without images</h1>
116 <p>No extra markup, fluid, all modern browsers</p>
117 </div>
118
119 <div class="drop-shadow curls">
120 <h1>Some curls</h1>
121 <p>No extra markup, all modern browsers</p>
122 </div>
123
124 <div class="drop-shadow perspective">
125 <h1>Some perspective</h1>
126 <p>No extra markup, all modern browsers</p>
127 </div>
128
129 <div class="drop-shadow raised">
130 <h1>Raised box</h1>
131 <p>No extra markup, all modern browsers</p>
132 </div>
133
134 <div class="drop-shadow round rotated">
135 <h1>Rotated box</h1>
136 <p>No extra markup, all modern browsers. Needs a child element to work.</p>
137 </div>
138 </body>
139 </html>
