Kamis, 08 Maret 2018

Membuat Bayangan Kotak Dengan Css

Diterbitkan Maret 08, 2018

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

Tulis script dibawah ini :

<!DOCTYPE html> <html> <head> <style> div { width:300px; height:100px; background-color:blue; -moz-box-shadow: 10px 10px 5px #888888; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div> </div> </body> </html>

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

Kenapa dapat muncul bayangan??
Berikut penjelasannya :

width:300px; = ialah 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 = ialah warna dari bayangan

Sebenarnya box-shadow sudah compatible disemua browser yang ada kini ini.
Selamat mencoba !!
Sumber http://creativitywhitoutlimits.blogspot.com