Blog yang berisi seputar kode-kode web pada platform blogger.

searchCari blog ini close

CSS Box Shadow - Membuat Bayangan Pada Elemen Tertentu

CSS Box Shadow - Membuat Bayangan Pada Elemen Tertentu
CSS Box Shadow

Css Box Shadow adalah salah satu property dari css3 yang berfungsi untuk memberikan efek bayangan pada elemen tertentu pada sebuah web.

Nilai Properti
*nilai negatif pada value diizinkan

Nilai Deskripsi
None Nilai awal, tidak ada bayangan yang ditampilkan
h-shadow Penting, Berfungsi untuk mengatur bayangan secara horizontal*
v-shadow Penting, Berfungsi untuk mengatur bayangan secara vertikal*
blur Opsional, untuk mengatur jarak blur
spread Opsional, untuk mengatur ukuran bayangan
color Opsional, untuk mengatur warna bayangan
inset Opsional, untuk membuat bayangan berada didalam elemen
initial Set, untuk membuat setingan secara standar
inherit Set, untuk membuat bayangan sama seperti elemen pertama
berikut ini adalah contoh dasar penggunaan CSS Box Shadow pada elemen:

Bayangan Diluar

div {
  -webkit-box-shadow:15px 10px 8px #666; /* Khusus untuk Safari & Chrome */
  -moz-box-shadow:15px 10px 8px #666;    /* Khusus untuk Firefox */
  box-shadow:15px 10px 8px #666;         /* Standar W3C */
}

Bayangan Didalam

div {
  -webkit-box-shadow:inset 15px 10px 8px #666; /* Khusus untuk Safari & Chrome */
  -moz-box-shadow:inset 15px 10px 8px #666;    /* Khusus untuk Firefox */
  box-shadow:inset 15px 10px 8px #666;         /* Standar W3C */
}
pada bagian 15 adalah offset untuk mengatur bayangan horizontal, sedangkan pada bagian 10 adalah offset untuk mengatur bayangan vertikal, 8 adalah tingkat blur, dan #666 adalah warna bayangan. pada bagian 15, 10, dan 8 anda bisa membuat value tersebut menjadi negatif terkecuali pada bagian warna.
Anda bisa mengatur penempatan css tidak langsung (top down) atau secara secara langsung (inline) seperti dibawah ini:

Top Down

<style>
#elemen1 {
  -webkit-box-shadow:inset 15px 10px 8px #666; /* Khusus untuk Safari & Chrome */
  -moz-box-shadow:inset 15px 10px 8px #666;    /* Khusus untuk Firefox */
  box-shadow:inset 15px 10px 8px #666;         /* Standar W3C */
}
</style>
<div id='elemen1'>Elemen 1</div>

Inline

<div id='elemen2' style='-webkit-box-shadow:15px 10px 8px #666;-moz-box-shadow:15px 10px 8px #666;box-shadow:15px 10px 8px #666;'>Elemen 2</div>
dan saya telah membuat beberapa contoh penerapan box shadow ini secara mendetail, sudah diberi warna oranye dan biru untuk memberitahukan kepada anda yang mana harus diubah:

-webkit-box-shadow: 10px5px 7px #222;
-moz-box-shadow: 10px5px 7px #222;
box-shadow: 10px5px 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;
Rizky

hanya sefruit manusia yang masih giat belajar

share_location Medan, North Sumatera, Indonesia

16 komentar

Posting Komentar

no Spam 🙂

disabled_by_defaultBatal Membalas
Selamat Datang
Halo, Selamat Datang di Males Code, Saya Memohon Maaf Website ini sedang dalam perbaikan dan pengembangan sehingga mungkin akan menemukan beberapa bug.
Oke