CSS Box Shadow – Membuat Efek Bayangan pada Area


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 & 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
#kotak1 {
-webkit-box-shadow:10px 10px 7px #222;
-moz-box-shadow:10px 10px 7px #222;
box-shadow:10px 10px 7px #222;
}

......

<div id='kotak1'>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;

sumber: hompimpaalaihumgambreng.blogspot.com

Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s