Teknik Pembuatan Box-Shadow CSS3 Bag.2

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: 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:














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








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:









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;}

</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 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!!!! Please rate this article: