Advanced Search

CSS3 box-shadow with page curl effect

/ Published in: Other
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.