Membuat Bayangan Kotak dengan CSS

Posted by Yogo Prestiyanto on Wednesday, November 21, 2012

Dalam artikel sederhana saya sebelumnya membahas tentang Belajar Border Radius di CSS , kali ini saya akan mencoba membuat sebuah bayangan kotak dengan CSS.
Wahh pasti sangat kerenn nihh !! :D
Mari kita praktekkan bersama-sama.

Tulis script dibawah ini :



Simpan dengan nama file index.html, kemudian jalankan pada browser favorit anda. Maka tampilannya seperti berikut :














Kenapa bisa muncul bayangan??
Berikut penjelasannya :

width:300px; = adalah panjang objek yang kita buat
height:100px; = lebar objek yang kita buat
background-color:blue; = warna latar belakang
-moz-box-shadow: 10px 10px 5px #888888; = bayangan untuk browser Mozilla Firefox
box-shadow: 10px 10px 5px #888888; = bayangan, #888888 = adalah warna dari bayangan


Sebenarnya box-shadow sudah compatible disemua browser yang ada sekarang ini.
Selamat mencoba !!

   

1 comment:

  1. Mantap gan, tapi kalau pengen bayangannya di seluruh sisi bagaimana?

    ReplyDelete