Memberi Bayangan Dengan Efek Curva Pada Box

Cara memberi efek bayangan pada sebuah objek dengan mudah kita lakukan hanya dengan penggunaan CSS box-shadow.
Sebagai percobaan, kita ilustrasikan dengan tampilan box sebagai target objek, selanjutnya kita buat box-nya dengan kode CSS seperti ini:

.box-text {
  background: #666;
  text-align:center;
  font:bold 16px/normal Helvetia,Sans Serif;
  color:#fff;
  padding: 30px;
  border-radius:3px;
  border:1px solid #333;
  margin:2em 0 0 0;
}

Tahap selanjutnya memberi efek bayangan melengkung (curva) pada tampilan box Anda dengan pangaturan CSS seperti ini:

.span:before, .span:after {
  content: "";
  position: absolute;
  z-index: -2;
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  bottom: 36px;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.75);
  height: 20%;
  left: 10px;
  max-height: 100px;
  //lebar kedua sisi (kiri dan kanan)
  width:350px;}

.span:after {
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  left: auto;
  right: 10px;}

Maka hasilnya akan tampil menarik seperti ini:

SAHABAT BLOGGER 77

LAYERED PAPER