Box-shadow yang berarti bayangan box ini adalah properti baru dalam css3 (Cascading Style Sheets) level 3. Pada artikel ini saya akan menjelaskan sedikit tentang box-shadow dan juga propertinya yang mudah-mudahan dapat di cerna oleh sahabat blogger semua. Di dalam pembuatan box-shadow kita bisa menerapkan rgba untuk warna atau hanya warna css dasar saja di sini saya akan menjelaskan yang simple saja tanpa rgba,itu di pembahasan selanjutnya nah..berikut adalah sintaks dan properti yang ada di box-shadow:


h-offset CSS3 box-shadow

h-offset: yang di mana value pertama contoh: box-shadow: 10px 0 0 #000;  10px yang berwarna merah adalah dapat memberikan bayangan ke kiri dan ke kanan, apabila kita memberikan nilai positif maka bayangan akan ke kanan tetapi sebaliknya apabila kita memberikan nilai negatif maka bayangan akan ke kiri lihat perbedaan dua contoh di bawah:

v-offset CSS3 box-shadow

V-offset ini sebelumnya pernah di jelaskan di artikel cara membuat text-shadow namun tak ada salahnya kita mengulang, v-offset dalam box-shadow berfungsi untuk memberi bayangan ke atas dan ke bawah, apabila nilai value semakin rendah maka bayangan akan ke atas dan apabila semakin besar maka bayangan akan ke bawah nilai value yang mau di berikan ada di tengah setelah h-offset, perhatikan contoh gambar di bawah:











BLUR CSS3 box-shadow

Kalau yang ini tidak ada nilai minus karena ini value terakhir yang akan memberikan bayangan blur di sini saya akan memberikan contoh warna yang berbeda agar terlihat blurnya silahkan di perhatikan






INSET css3 BOX-shadow

Yang di maksud dengan fungsi inset dalam box-shadow css3 adalah memberikan bayangan di dalam, kalu yang tadi kita bahas adalah bagaimana memberikan bayangan di luar kotak, nah.. dengan menambahkan perintah inset kita bisa memberikannya di dalam kotak, untuk lebih jelasnya silahkan lihat kotak di bawah yang sudah di berikan inset:






BISAKAH GAMBAR DI BERIKAN box-shadow?


Ini yang menjadi pertannyaan karena box-shadow hanya terlihat bayangan kotak tapi tenang saya akan memberikan sebuah soal agar sobat bisa berkreasi saya hanya memasukan background url jadi tidak perlu memasukannya dalam div html tetapi cukup di css contoh:


<style type="text/css">

#box-bayangan{background:url(DI SINI ADALAH URL GAMBAR YANG INGIN SOBAT BERIKAN);margin:0 auto;padding:10px;width:280px;height:200px; -moz-box-shadow: 0 0 100px  #000 ;
-webkit-box-shadow: 0 0 100px  #000;


 box-shadow: 0 0 100px #000;

-moz-border-radius:0px;-webkit-border-radius:0px;}

</style>

<div id="box-bayangan">

</div>


nah.. kode di atas sobat bisa masukan langsung ke dalam postingan sobat, dan jangan lupa tentukan gambarnya, di sana saya tidak memberikan nilai valuenya hanya di blur yaitu 100px untuk value yang lain sobat tinggal menentukannya dan untuk hover.Kalau sobat mencoba cara membuat box-shadow saya yakin pasti ketagihan dan semakin penasaran dengan CSS3,,oke.. untuk sekedar latihan, atau sobat bisa berkreasi sendiri?? ITU LEBIH BAIK...

CONTOH GAMBAR YANG DI BERIKAN BOX-SHADOW






CONTOH box-shadow DENGAN fungsi HOVER









CONTOH GAMBAR DENGAN INSET

CONTOH GAMBAR DENGAN FUNGSI HOVER

CONTOH GAMBAR DENGAN INSET DAN HOVER
Siip!!! pake telor sama sambel saus, akhirnya beres untuk hasil dan penilaian tergantung dari sang pembaca,, mohon saran dan kritiknya apabila ada kesalahan dalam artikel box-shadow css3 ini, akhir kata selamat mencoba, semoga berguna, semoga bermanfaat, kreasikan ilmu yang ada dan salam tiga jari!!!!

Lihat juga artikel lainnya :)