Teknik Pembuatan Box-Shadow CSS3 Bag.3

Postingan saya ini hanya untuk melanjutkan postingan saya yang lalu mengenai dasar2 membuat box shadow, dan 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 & Firefox */
  -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-Down	Inline
#BOX1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='BOX1'>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;