Profile image for Joost Kiens 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
Profile image for Tom Hancock Profile image for Jenny Frank Profile image for Marcus Stephens Profile image for SAHARSH JAIN Profile image for James Murray Profile image for Søren Eriksen Profile image for Fran Hanyok Profile image for Kamalpreet Chauhan Profile image for Tracie Hall Profile image for Mauro Artizzu Profile image for Tae Kim Profile image for Christian Schulze Profile image for Ravidhu Dissa Profile image for Chris W

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

Profile image for SAHARSH JAIN digitalquark 2013-07-19

luvly nyce work thnx :)