Page Widget How to - Create 3d Bottom Paper like Shadow

Question

We would like to know how to create 3d Bottom Paper like Shadow.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h1 {<!--from w w  w. j a va  2 s  .c  om-->
  position: relative;
  padding-top: 100px;
  top: -1ex;
  text-transform: uppercase;
}

.shadow-box {
  width: 300px;
  height: 200px;
  margin: 25px auto;
  position: relative;
  background-color: #fff;
  text-align: center;
}

.shadow-box:before, .shadow-box:after {
  content: "";
  display: block;
  width: 280px;
  height: 20px;
  position: absolute;
  left: 10px;
  bottom: 13px;
  z-index: -1;
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
}

.shadow-box:before {
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.shadow-box:after {
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
}
</style>
</head>
<body>
  <div class="shadow-box">
    <h1>this is a test</h1>
  </div>
</body>
</html>

The code above is rendered as follows: