CSS Box Shadow - Membuat Efek Bayangan pada Area
Tabel Konten
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 & Chrome */
-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 |
---|---|
<style> #kotak-1 { -webkit-box-shadow:10px 10px 7px #222; | <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;
11 Komentar
Unknown
tanya nih, script padding itu untuk apa ya ?
Unknown
tanya lagi nih mas! gimana cara gabungin css shadaw inset dan outset disatu elemen
Taufik Nurrohman
@Agust Nurfa Pisahkan dengan tanda koma seperti ini:
Selengkapnya: Lebih Jauh tentang CSS Box-Shadow
Sixrone 609 Community
http://e-seni.blogspot.com/
Ane asik banget maennya bg...
maksie yahh tutor brmnfaatnya....
hehehh
Anonim
Waaahhhh... lengkap bangeet \o/ makasih banyak mas :-bd googling dari pagi, akhirnya nemu juga, hehehe :D Langsung deh ke tekape, hehehe ^_^
Unknown
Thanks Mas Taufik... Visit back
http://center60.blogspot.com/
Sikkahoder
saya berkunjung lagi... salam kenal, maaf bang saya mau nanya, mungkin sedikit melebar dari postingan.. gini mas, saya mau buat efek shadow di area sidebar blog... tapi sampai saat ini saya belum tahu dimana kode html untuk sidebar... tample blog saya tidak ada #sidebar-wrapper atau #sidebar-wrap saya udah ikutin beberapa tutorial, tapi gak ketemu juga.. jadi saya berencana membatasi area postingan dengan area sidebar dengan efek shadow.. kalau area postingan sudah saya ketemu tapi kalau area sidebar saya belum ketemu juga... dimana ya?? maksud saya bukan buat shadow pada area widgetnya tapi pada daerah sidebar secara keseluruhan sehingga ada pembatas antara area postingan dengan area sidebar... tolong petunuknya... makasih... oh ya hampir lupa.. ini alamat blog saya.. SIKKAHODER
Taufik Nurrohman
Coba begini:
Tes
Tes
Surya Chandra Gobel
tutorialnya mas taufik mah emang membantu bner dah ! :-bd
Taufik Nurrohman