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
feedburner

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

14 komentar :

  1. makin cantik aja tampilan blog kita kw ada effect shadownya ya sobat :)

    BalasHapus
  2. Balasan
    1. mbak itu diatas demonya yang bayangan warna coklat... terus blog ini sekarang pake efek tersebut.. hampir semuanya.

      Hapus
    2. . . ouwwww,, begitu. tenkz kawan. oia silahkan di cek di link partner. udah aq pasang disitu . .

      Hapus
    3. Iya.. mba cuma kalau pake IE dibawah IE9 kayanya jadi berantakan ni blog.. habis IE dibawahIE9 ga suport dengan efek shadow dan radius..

      Hapus
  3. Nice Tips Gan . . Ijin nyimak dulu maklum masih bingung dengan yang begituan. . Saya masih perlu banyak belajar lagi . .

    BalasHapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |