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 |
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;
demonyaa mas?
BalasHapusoke mas ,
Hapussilahkan dinikmati hidangannya :)
keren :)
Hapusbagus mas, bisa nambah ilmu nih :-bd
BalasHapusterima kasih, semoga bermanfaat :)
Hapusmantap mas... \m/
BalasHapusterima kasih :)
Hapusdilihat di kompi saya ko tampilannya acak-acakan gini ya
BalasHapuscoba berikan saya screenshotnya...
Hapusini sob
Hapushttp://prntscr.com/2y1bid
ia ,
Hapusemang disana lagi bermasalah ,
maaf template yang belum sempurna ini masih dalam tahap pengembangan
keren banget nih malescode :) mantap...
BalasHapusTerima kasih :D
Hapusbisa bikin kaya gini sob? http://i.imgur.com/LWuf3lX.png :D
BalasHapusbisa sob, :yaya:
Hapusgunakan 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/
BalasHapus