CSS Lifted corner Drop Shadow


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



Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2.  
  3.  
  4. .box{
  5. width:200px;
  6. height:100px;
  7.  
  8. }
  9.  
  10. .drop-shadow {
  11. position:relative;
  12. float:left;
  13. width:40%;
  14. padding:1em;
  15. margin:2em 10px 4em;
  16. background:#fff;
  17. -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  18. -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  19. box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  20. }
  21.  
  22. .drop-shadow:before,
  23. .drop-shadow:after {
  24. content:"";
  25. position:absolute;
  26. z-index:-2;
  27. }
  28.  
  29. .drop-shadow p {
  30. font-size:16px;
  31. font-weight:bold;
  32. }
  33.  
  34.  
  35. .lifted {
  36. -moz-border-radius:4px;
  37. border-radius:4px;
  38. }
  39.  
  40. .lifted:before,
  41. .lifted:after {
  42. bottom:15px;
  43. left:10px;
  44. width:50%;
  45. height:20%;
  46. max-width:300px;
  47. -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  48. -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  49. box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  50. -webkit-transform:rotate(-3deg);
  51. -moz-transform:rotate(-3deg);
  52. -ms-transform:rotate(-3deg);
  53. -o-transform:rotate(-3deg);
  54. transform:rotate(-3deg);
  55. }
  56.  
  57. .lifted:after {
  58. right:10px;
  59. left:auto;
  60. -webkit-transform:rotate(3deg);
  61. -moz-transform:rotate(3deg);
  62. -ms-transform:rotate(3deg);
  63. -o-transform:rotate(3deg);
  64. transform:rotate(3deg);
  65. }
  66.  
  67. </head>
  68.  
  69. <div class="box drop-shadow lifted"></div>
  70.  
  71. </body>
  72. </html>

URL: http://html5snippets.com/snippets/10-css-lifted-corner-drop-shadow#

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.