Altec DZ

Hai sobat.
udah lama nih aku tidak posting di blog butut ini. sekarang aku mau posting tentang "Cara Membuat Efeck Bottom Shadows Dengan CSS3".

oke tanpa lama-lama,kita langsung cara ke caranya.
Nah kita mulai saja dengan membuat sebuah kotak sederhana :

Kita buat dengan CSS misalnya :

#kotak-shadows {
        width: 70%;
        height: 100px;
        background-color: #C5C1BA;
        color: #2d2d2d;
        margin: 20px auto;
        line-height: 100px;
        text-align: center;
}

Kita aplikasikan dengan HTML

<div id="kotak-shadows">CONTOH BOTTOM SHADOW</div>

Setelah jadi kotak selanjutnya kita mulai berikan efeck shadows dengan membuat sebuah selektor class yang akan digunakan untuk menmbahkan efeck shadows, berikut tambahankan CSS dibawah ini :

.efek-shadows {
        position: relative;
        -moz-box-shadow: 0 52px 26px -36px rgba(0,0,0,0.8);
        -webkit-box-shadow: 0 52px 30px -39px rgba(0,0,0,0.8);
        box-shadow: 0 52px 30px -39px rgba(0,0,0,0.8);

Untuk pengaplikasiannya tamabahkan selektor efek-shadows nya

<div id="kotak-shadows" class="efeck-shadows">BOTTOM SHADOW</div>

Jangan berhenti dulu, coba tambhan efeck sedkit lagi biar lebih cakep lagi, memberi efek di shadowsnya dan setuhan trakhir beri efek di textnya, coba CSS diatas kita beri fek seperti dibawah ini :

#kotak-shadows {
        width: 70%;
        height: 100px;
        background-color: #C5C1BA;
        color: #2d2d2d;
        margin: 20px auto;
        line-height: 100px;
        text-align: center;
        text-shadow: 0 1px 1px #fff, 0 -1px 1px #000;
}
.efek-shadows {
       position: relative;
       -moz-box-shadow: 0 52px 26px -36px rgba(0,0,0,0.8);
       -webkit-box-shadow: 0 52px 30px -39px rgba(0,0,0,0.8);
       box-shadow: 0 52px 30px -39px rgba(0,0,0,0.8);
}
.efek-shadows:before, .efek-shadows:after {
       content: '';
       position: absolute;
       z-index: -1;
       bottom: 0;
       width: 30px;
       height: 50px;
}
.efek-shadows:before {
       -moz-transform: skew(40deg);
       -webkit-transform: skew(40deg);
       -o-transform: skew(40deg);
       transform: skew(40deg);
       right: 54px;
       -moz-box-shadow: 9px 17px 18px rgba(0, 0, 0, 0.3);
       -webkit-box-shadow: 14px 17px 26px rgba(0, 0, 0, 0.3);
       box-shadow: 9px 17px 18px rgba(0, 0, 0, 0.3);
}
.efek-shadows:after {
      -moz-transform: skew(-40deg);
      -webkit-transform: skew(-40deg);
      -o-transform: skew(-40deg);
      transform: skew(-40deg);
      left: 54px;
      -moz-box-shadow: -9px 17px 18px rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: -14px 17px 26px rgba(0, 0, 0, 0.3);
      box-shadow: -9px 17px 18px rgba(0, 0, 0, 0.3);
}

Terimakasih semoga bermafaat dan selamat bermain dengan CSS.

Source