CSS3 - efekt cienia (zagięte rogi)

 shadow.jpg   4,25 KB   0 Ilość pobrań

Kod HTML:

<div class="box"></div>

 
 Hod CSS:

body {
  background: #ccc;
}

.box {
  width: 500px;
  height: 100px;
  background: #fff;
  margin: auto;
  position: relative;
}

.box:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 16px;
  left: 1%;
  width: 45%;
  top: 80px;
  max-width: 300px;
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.37);
  box-shadow: 0 15px 10px rgba(0,0,0,0.37);
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

.box:after {
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.37);
  box-shadow: 0 15px 10px rgba(0,0,0,0.37);
  right: 1%;
  left: auto;
  width: 45%;
  top: 80px;
  max-width: 300px;
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 16px;
}

Demo: http://jsfiddle.net/bkm2L0y6/