Advanced Search

CSS3 Paper Shadow

/ Published in: CSS
Save to your folder(s)
Fancy paper shadow effect

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .drop-shadow {
  2.    position:relative;
  3.    width:90%;
  4. }
  5.  
  6. .drop-shadow:before,
  7. .drop-shadow:after {
  8.    content:"";
  9.    position:absolute;
  10.    z-index:-1;
  11.    bottom:15px;
  12.    left:10px;
  13.    width:50%;
  14.    height:20%;
  15.    max-width:300px;
  16.    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  17.    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  18.    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  19.    -webkit-transform:rotate(-3deg);
  20.    -moz-transform:rotate(-3deg);
  21.    -o-transform:rotate(-3deg);
  22.    transform:rotate(-3deg);
  23. }
  24.  
  25. .drop-shadow:after{
  26.    right:10px;
  27.    left:auto;
  28.    -webkit-transform:rotate(3deg);
  29.    -moz-transform:rotate(3deg);
  30.    -o-transform:rotate(3deg);
  31.    transform:rotate(3deg);
  32.  }

URL: http://nicolasgallagher.com/css-drop-shadows-without-images/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.