Advanced Search

CSS Lifted corner Drop Shadow

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

Expand | Embed | Plain Text

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