-
joost.kiens
- CSS3 Box-shadow with a nice effect. Found on http://matthamm.com/box-shadow-c...
- Language
- HTML
- Tags
- box-shadow css3
- Favorited By
-
CSS3 box-shadow with page curl effect
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title> </title>
6 <style>
7 ul.box {
8 margin: 0;
9 padding: 0; }
10
11 ul.box li {
12 list-style-type: none;
13 margin: 0 30px 30px 0;
14 padding: 0;
15 width: 250px;
16 height: 150px;
17 border: 1px solid #efefef;
18 position: relative;
19 float: left;
20 background: #ffffff; /* old browsers */
21 background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
22 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
23 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
24 -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
25 -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }
26
27 ul.box li:after {
28 z-index: -1;
29 position: absolute;
30 background: transparent;
31 width: 70%;
32 height: 55%;
33 content: '';
34 right: 10px;
35 bottom: 10px;
36 -webkit-transform: skew(15deg) rotate(5deg);
37 -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
38 -moz-transform: skew(15deg) rotate(5deg);
39 -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }
40
41 ul.box li:before {
42 z-index: -2;
43 position: absolute;
44 background: transparent;
45 width: 70%;
46 height: 55%;
47 content: '';
48 left: 10px;
49 bottom: 10px;
50 -webkit-transform: skew(-15deg) rotate(-5deg);
51 -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
52 -moz-transform: skew(-15deg) rotate(-5deg);
53 -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }
54 </style>
55 <body><!-- source: http://matthamm.com/box-shadow-curl.html -->
56 <ul class="box">
57 <li></li>
58 <li></li>
59 <li></li>
60 <li></li>
61 <li></li>
62 <li></li>
63 </ul>
64 </body>
65 </html>
Comments
Sign in to leave a comment.
