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;

16 komentar

oke mas ,
silahkan dinikmati hidangannya :)
bagus mas, bisa nambah ilmu nih :-bd
Reply Delete
terima kasih, semoga bermanfaat :)
dilihat di kompi saya ko tampilannya acak-acakan gini ya
Reply Delete
coba berikan saya screenshotnya...
keren banget nih malescode :) mantap...
Reply Delete
bisa bikin kaya gini sob? http://i.imgur.com/LWuf3lX.png :D
Reply Delete
bisa sob, :yaya:
gunakan kode dibawah ini:

html
<div class="box">
// Konten
</div>


CSS
.box {
position:relative;
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.box:before, .box:after {
z-index:-1;
position:absolute;
content:"";
bottom:15px;
left:10px;
width:50%;
top:80%;
max-width:300px;
background:#777;
-webkit-box-shadow:0 15px 10px #777;
-moz-box-shadow:0 15px 10px #777;
box-shadow:0 15px 10px #777;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.box:after {
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
right:10px;
left:auto;
}


Semoga Bermanfaat Bro :-bd
mas ...di request tutorial bikin lighter @ lightbox nya mas \m/
Reply Delete

Posting Komentar

no Spam :)

Cancel Reply