Cara Mudah Membuat efek Bayangan / shadow dengan CSS

Assalamualaikum.wr.wb.... ! Bakalan-Tlogorejo-City Akan berbagi dengan sampeyan,,, Mengenai Cara Mudah Membuat efek Bayangan / shadow dengan CSS, setelah beberapa waktu lalu saya mengedit blog ini dengan memasang efek bayangan pada bagian postingan dan sidebar  jadi ingin berbagi pengalaman melalui postingan ini, mungkin buat sebagian blogger cara ini memang sudah tidak asing lagi namun mungkin juga buat blogger yang masih pemula seperti saya pengetahuan ini terasa perlu sekali dimana disaat ingin membuat perubahan pada tampilan template menggunakan cara ini. atau mungkin buat sobat yang kebetulan mengunjungi halaman ini meskipun sudah tau cara ini jadi kepikiran buat ngedit blognya menggunakan cara ini.

Berikut ini adalah kode CSS dasar untuk membuat efek bayanganpada objek:

CSS ShadowOutset:

{-webkit-box-shadow:5px 5px 10px #B45F04;
-moz-box-shadow:5px 5px 10px #B45F04;    

box-shadow:10px 5px 5px 10px #B45F04;}

CSS Shadow Inset:

{-webkit-box-shadow:inset 5px 5px 10px #B45F04;
-moz-box-shadow:inset 5px 5px 10px #B45F04;
box-shadow:inset 5px 5px 10px #B45F04;}

5px yang pertama adalah ukuran offset sumbu-X, 5px yang ke dua adalah offset sumbu-Y, 10px adalah tingkat blur, #B45F04 adalah warna bayangan. Penulisannya bisa juga dengan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:

• Top down:

#box {
-webkit-box-shadow:10px 10px 7px #222;
-moz-box-shadow:10px 10px 7px #222;
box-shadow:10px 10px 7px #222;
}
......
<div id='box'>OBJEK</div>

• Inline

<div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'> OBJEK </div>

Beberapa Contoh Efek shadow dengan CSS

-webkit-box-shadow: 10px 5px 7px #B45F04;
-moz-box-shadow: 10px 5px 7px #B45F04;
box-shadow: 10px 5px 7px #B45F04;

-webkit-box-shadow: 0 10px 7px #B45F04;
-moz-box-shadow: 0 10px 7px #B45F04;
box-shadow: 0 10px 7px #B45F04;

-webkit-box-shadow: 10px 0 7px #B45F04;
-moz-box-shadow: 10px 0 7px #B45F04;
box-shadow: 10px 0 7px #B45F04;

-webkit-box-shadow: 0 0 7px #B45F04;
-moz-box-shadow: 0 0 7px #B45F04;
box-shadow: 0 0 7px #B45F04;

-webkit-box-shadow: 0 0 20px #B45F04;
-moz-box-shadow: 0 0 20px #B45F04;
box-shadow: 0 0 20px #B45F04;

-webkit-box-shadow: 10px 5px 0 #B45F04;
-moz-box-shadow: 10px 5px 0 #B45F04;
box-shadow: 10px 5px 0 #B45F04;

-webkit-box-shadow: -10px -5px 0 #B45F04;
-moz-box-shadow: -10px -5px 0 #B45F04;
box-shadow: -10px -5px 0 #B45F04;

-webkit-box-shadow: inset 10px 5px 7px #B45F04;
-moz-box-shadow: inset 10px 5px 7px #B45F04;
box-shadow: inset 10px 5px 7px #B45F04;

-webkit-box-shadow: inset 0 10px 7px #B45F04;
-moz-box-shadow: inset 0 10px 7px #B45F04;
box-shadow: inset 0 10px 7px #B45F04;

-webkit-box-shadow: inset 10px 0 7px #B45F04;
-moz-box-shadow: inset 10px 0 7px #B45F04;
box-shadow: inset 10px 0 7px #B45F04;

-webkit-box-shadow: inset 0 0 7px #B45F04;
-moz-box-shadow: inset 0 0 7px #B45F04;
box-shadow: inset 0 0 7px #B45F04;

-webkit-box-shadow: inset 0 0 20px #B45F04;
-moz-box-shadow: inset 0 0 20px #B45F04;
box-shadow: inset 0 0 20px #B45F04;

-webkit-box-shadow: inset 10px 5px 0 #B45F04;
-moz-box-shadow: inset 10px 5px 0 #B45F04;
box-shadow: inset 10px 5px 0 #B45F04;

-webkit-box-shadow: inset -10px -5px 0 #B45F04;
-moz-box-shadow: inset -10px -5px 0 #B45F04;
box-shadow: inset -10px -5px 0 #B45F04;

Mungkin sampai disini dulu artikel Cara Mudah Membuat efek Bayangan / shadow dengan CSS Selamat mencoba...!!!

Semoga bermanfaat.........