Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada kesempatan kali ini saya akan memberikan tips dan tutorial tentang Cara Membuat Bayangan pada Kotak dengan CSS. Dipembahasan kali ini tidak jauh berbeda dengan pembahasan yang sebelumnya tentang bayangan pada text hanya saja perbedaan pada property yang digunakan. Disini property yang kita gunakan adalah property box-shadow, jadi box-shadow merupakan sebuah bayangan pada kotak (box) dan dapat diisi dengan beragam nilai, tapi setidaknya perlu 2 nilai utama yang menentukan seberapa jauh jarak bayangan yang ditampilkan.

Oke untuk lebih jelasnya mari kita mulai dalam Cara Membuat Bayangan pada Kotak dengan CSS. Pertama-tama jalankan/run text-editor yang teman-teman gunakan, kemudian ketik/copy script HTML seperti dibawah ini :

Jika sudah silahkan teman-teman simpan terlebih dahulu, kemudian silahkan teman-teman buka kembali text-editornya lalu ketik/copy script CSS seperti dibawah ini :

Jika sudah simpan, dan didalam CSS diatas kita belum menggunakan property box-shadow dan silahkan teman-teman jalankan/run dibrowser maka hasilnya akan terlihat seperti pada gambar dibawah ini :

cara-membuat-bayangan-pada-kotak-dengan-css

Gambar diatas belum mempunyai bayangan ya teman-teman. Oke sekarang coba kita tambahkan property box-shadow dicssnya, maka hasil penambahan property dicss seperti dibawah ini :

Oke jika sudah, silahkan coba teman-teman refresh atau jalankan kembali dibrowser yang teman-teman gunakan jika benar maka hasilnya akan terlihat seperti pada gambar dibawah ini :

cara-membuat-bayangan-pada-kotak-dengan-css

Bagaimana teman-teman ? sudah ada bayangannya kan pada kotak tsb hehe. Sangat mudah sekali ya teman-teman dalam Cara Membuat Bayangan pada Kotak dengan CSS. untuk pengembangannya silahkan teman-teman modifikasi sendiri sesuai selera teman-teman.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Bayangan pada Kotak dengan CSS dan semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih