CSS 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;





0 comments:

Luncurkan toko Anda hanya dalam 4 detik dengan 
 
Top