Efek drop shadow dapat membuat disain tampak menarik jika kita menata dengan baik. Dalam CSS3 telah ditambahkan fasilitas drop shadow dengan menggunakan property box-shadow.
Property box-shadow memiliki format:
box-shadow: inset x y blur spread color;
Nilai inset menunjukkan di mana shadow akan diletakkan di dalam box atau di luar box.
Nilai x menunjukkan jarak horizontal drop shadow dari box.
Nilai y menunjukkan jarak vertikal drop shadow dari box.
Blur menunjukkan besarnya blur.
Spread menunjukkan besarnya spread.
Color menujukkan warna dari shadownya.
Contoh coding untuk drop shadow ini :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Drop Shadow</title>
</head>
<body>
<style type=”text/css”>
#kotak1
{
width: 400px;
height: 200px;
box-shadow: 4px 4px 3px 1px #666;
margin: 10px;
background-color: yellow;
}
#kotak2
{
width: 400px;
height: 200px;
box-shadow: inset 4px 4px 3px 1px #666;
margin: 10px;
background-color: orange;
}
</style>
</body>
<div id=”kotak1″>
Ini kotak 1
</div>
<div id=”kotak2″>
Ini kotak 2
</div>
</html>
Hasilnya bisa dilihat di http://aris.proweb.asia/drop_shadow.html dengan tampilan seperti gambar berikut ini
Kunjungi www.proweb.co.id untuk menambah wawasan anda.