Membuat efek Bayangan / shadow dengan CSS

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat efek Bayangan / shadow dengan CSS dan semoga artikel ini bermanfaat.

---

Membuat efek Bayangan / shadow dengan CSS, setelah beberapa waktu lalu saya mengedit blog ini dengan memasang efek bayangan pada bagian postingan dan sidebar saya 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 bayangan pada 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 Belajar Komputer Melalui Internet tentang Membuat efek Bayangan / shadow dengan CSS kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 19:36