Cara membuat shadow css

Shadow box CSS berfungsi untuk membuat bayangan pada keliling kotak / box bahasa kampung saya sering menyebutnya dengan box shadow:-).
Css ini selain untuk mengatur luar kotak dapat juga digunakan untuk mengatur bayang di dalam kotak . Untuk dapat menampilkan bayangan / shadow kita cukup dengan menambahkan kata kunci css box-shadow. Kode css ini dapat digunakan dengan cara menentukan: ukuran, nilai, warna, offset dan kabur.

Css shadow ini terkadang tidak bisa terlihat pada semua browser, karena ada beberapa browser yang tidak dapat menampilkan css ini, akan tetapi untuk semua webkit browser seperti browser Google chrome, browser Opera, browser Mozilla Firefox dan Internet Explorer versi terbaru. Dengan menggunakan css box-shadow kita juga dapat menentukan opacity menggunakan warna RBG.
Seperti biasa, tanpa panjang dan lebar membahas tentang css ini, mari kita lihat contoh kode css box-shadow.

.outershadow {
-moz-box-shadow: 0 0 5px 3px blue;
-webkit-box-shadow: 0 0 3px 5px blue;
box-shadow: 0 0 5px 3px blue;
}

CONTOH OUTER SHADOW MENGGUNAKAN
-moz-box-shadow: 0 0 5px 3px blue;
-webkit-box-shadow: 0 0 3px 5px blue;
box-shadow: 0 0 5px 3px blue;

.insetshadow {
-moz-box-shadow: inset 0 0 5px 3px red;
-webkit-box-shadow: inset 0 0 3px 5px red;
box-shadow: inset 0 0 5px 3px red;
}

CONTOH INNER SHADOW MENGGUNAKAN
-moz-box-shadow: inset 0 0 5px 3px red;
-webkit-box-shadow: inset 0 0 3px 5px red;
box-shadow: inset 0 0 5px 3px red;

Kita juga dapat membuat shadow terlihat terang, tanpa menggunakan efek kabur, cara ini cukup dengan menambahkan kode blur dengan angka nol

.nblur {
-moz-box-shadow: -5px -5px 0 black;
-webkit-box-shadow: -5px -5px 0 black;
box-shadow: -5px -5px 0 black;
}

-moz-box-shadow: -5px -5px 0 black;
-webkit-box-shadow: -5px -5px 0 black;
box-shadow: -5px -5px 0 black;

Menggunakan opacity

-moz-box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.4);
box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.4);
}

-moz-box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.4);
box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.4);

menggunakan round tooltip

background:#e41f1f;
-moz-box-shadow: 0 0 5px 3px blue;
-webkit-box-shadow: 0 0 3px 5px blue;
box-shadow: 0 0 5px 3px blue;
}

-moz-box-shadow: 0 0 5px 3px blue;
-webkit-box-shadow: 0 0 3px 5px blue;
box-shadow: 0 0 5px 3px blue;