Mecha versi 2.6.4 sudah dirilis!

CSS Box Shadow - Membuat Efek Bayangan pada Area

Tabel Konten
  1. CSS Bayangan Outset 
  2. CSS Bayangan Inset 
Box Shadow

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:

CSS Bayangan Outset 

div {
  -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:10px 10px 7px #222;    /* Firefox */
  box-shadow:10px 10px 7px #222;         /* W3C */
}

CSS Bayangan Inset 

div {
  -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:inset 10px 10px 7px #222;    /* Firefox */
  box-shadow:inset 10px 10px 7px #222;         /* W3C */
}

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

Top-DownInline
<style> #kotak-1 {   -webkit-box-shadow:10px 10px 7px #222;
  -moz-box-shadow:10px 10px 7px #222;
  box-shadow:10px 10px 7px #222;
} </style> <div id='kotak-1'>OBJEK</div>		<div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'>OBJEK</div>

Dan ini adalah contoh-contoh penerapan yang lebih detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas bagian mana yang harus menjadi perhatian:

-webkit-box-shadow: 10px 5px 7px #222;
-moz-box-shadow: 10px 5px 7px #222;
box-shadow: 10px 5px 7px #222;
-webkit-box-shadow: 0 10px 7px #222;
-moz-box-shadow: 0 10px 7px #222;
box-shadow: 0 10px 7px #222;
-webkit-box-shadow: 10px 0 7px #222;
-moz-box-shadow: 10px 0 7px #222;
box-shadow: 10px 0 7px #222;
-webkit-box-shadow: 0 0 7px #222;
-moz-box-shadow: 0 0 7px #222;
box-shadow: 0 0 7px #222;
-webkit-box-shadow: 0 0 20px #222;
-moz-box-shadow: 0 0 20px #222;
box-shadow: 0 0 20px #222;
-webkit-box-shadow: 0 0 20px #f10c0c;
-moz-box-shadow: 0 0 20px #f10c0c;
box-shadow: 0 0 20px #f10c0c;
-webkit-box-shadow: 10px 5px 0 #222;
-moz-box-shadow: 10px 5px 0 #222;
box-shadow: 10px 5px 0 #222;
-webkit-box-shadow: -10px -5px 0 #222;
-moz-box-shadow: -10px -5px 0 #222;
box-shadow: -10px -5px 0 #222;
-webkit-box-shadow: inset 10px 5px 7px #222;
-moz-box-shadow: inset 10px 5px 7px #222;
box-shadow: inset 10px 5px 7px #222;
-webkit-box-shadow: inset 0 10px 7px #222;
-moz-box-shadow: inset 0 10px 7px #222;
box-shadow: inset 0 10px 7px #222;
-webkit-box-shadow: inset 10px 0 7px #222;
-moz-box-shadow: inset 10px 0 7px #222;
box-shadow: inset 10px 0 7px #222;
-webkit-box-shadow: inset 0 0 7px #222;
-moz-box-shadow: inset 0 0 7px #222;
box-shadow: inset 0 0 7px #222;
-webkit-box-shadow: inset 0 0 20px #222;
-moz-box-shadow: inset 0 0 20px #222;
box-shadow: inset 0 0 20px #222;
-webkit-box-shadow: inset 0 0 20px #f10c0c;
-moz-box-shadow: inset 0 0 20px #f10c0c;
box-shadow: inset 0 0 20px #f10c0c;
-webkit-box-shadow: inset 10px 5px 0 #222;
-moz-box-shadow: inset 10px 5px 0 #222;
box-shadow: inset 10px 5px 0 #222;
-webkit-box-shadow: inset -10px -5px 0 #222;
-moz-box-shadow: inset -10px -5px 0 #222;
box-shadow: inset -10px -5px 0 #222;

11 Komentar

Unknown

tanya nih, script padding itu untuk apa ya ?

Unknown

tanya lagi nih mas! gimana cara gabungin css shadaw inset dan outset disatu elemen

Taufik Nurrohman

@Agust Nurfa Pisahkan dengan tanda koma seperti ini:

-webkit-box-shadow:inset 0px -1px 3px red, 0px 1px 3px black;
-moz-box-shadow:inset 0px -1px 3px red, 0px 1px 3px black;
box-shadow:inset 0px -1px 3px red, 0px 1px 3px black;

Selengkapnya: Lebih Jauh tentang CSS Box-Shadow

Sixrone 609 Community

http://e-seni.blogspot.com/

Ane asik banget maennya bg...
maksie yahh tutor brmnfaatnya....
hehehh

Anonim

Waaahhhh... lengkap bangeet \o/ makasih banyak mas :-bd googling dari pagi, akhirnya nemu juga, hehehe :D Langsung deh ke tekape, hehehe ^_^

Unknown

Thanks Mas Taufik... Visit back
http://center60.blogspot.com/

Sikkahoder

saya berkunjung lagi... salam kenal, maaf bang saya mau nanya, mungkin sedikit melebar dari postingan.. gini mas, saya mau buat efek shadow di area sidebar blog... tapi sampai saat ini saya belum tahu dimana kode html untuk sidebar... tample blog saya tidak ada #sidebar-wrapper atau #sidebar-wrap saya udah ikutin beberapa tutorial, tapi gak ketemu juga.. jadi saya berencana membatasi area postingan dengan area sidebar dengan efek shadow.. kalau area postingan sudah saya ketemu tapi kalau area sidebar saya belum ketemu juga... dimana ya?? maksud saya bukan buat shadow pada area widgetnya tapi pada daerah sidebar secara keseluruhan sehingga ada pembatas antara area postingan dengan area sidebar... tolong petunuknya... makasih... oh ya hampir lupa.. ini alamat blog saya.. SIKKAHODER

Taufik Nurrohman

Coba begini:

#sidebar-right-1 {
-webkit-box-shadow:0 0 10px red;
-moz-box-shadow:0 0 10px red;
box-shadow:0 0 10px red;
}

Tes

Tes

Taufik Nurrohman

Komentar telah ditutup.