(CSS) CSS3 Paper Shadow

Fancy paper shadow effect

  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.  }
This entry was posted in Uncategorized and tagged , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Why ask?