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

Rio Us
bagus mas, bisa nambah ilmu nih :-bd
reply Reply delete Delete
Rizky Kurniawan Ritonga
terima kasih, semoga bermanfaat :)
Ruly Jenar Nakula
dilihat di kompi saya ko tampilannya acak-acakan gini ya
reply Reply delete Delete
Rizky Kurniawan Ritonga
coba berikan saya screenshotnya...
Rian Nurherdian
bisa bikin kaya gini sob? http://i.imgur.com/LWuf3lX.png :D
reply Reply delete Delete
Rizky Kurniawan Ritonga
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
kembara Blogger
mas ...di request tutorial bikin lighter @ lightbox nya mas \m/
reply Reply delete Delete

Posting Komentar

Blog ini tidak menerima komentar via OpenID atau Anonim.
Link aktif akan secara otomatis terhapus oleh sistem.
Untuk memasukkan link dengan aman, gunakan kode [url=http://sites.com]Teks Link[/url]
Untuk memasukkan kode, gunakan kode <i rel="code">Kode Kamu</i>
Untuk memasukkan kode yang panjang, gunakan kode <i rel="pre">Kode Panjang Kamu</i>
Untuk menyisipkan gambar, gunakan kode [img]Url Gambar[/img]
Untuk memasukkan title, gunakan kode <b rel="h4">Title kamu ...</b>
Untuk memberikan efek huruf tebal pada teks, gunakan kode <strong>Teks Kamu ...</strong>
Untuk memberikan efek huruf miring pada teks, gunakan kode <em>Teks Kamu ...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Emotikon
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Cancel Reply