Saat ini kita bisa membuat efek bayangan atau shadow dengan css itu sendiri seperti ketika kita membuatnya dengan menggunakan photoshop.
Hal ini di dukung oleh browsr firefox, safari, chrome, opera dan IE9.
CSS:
#contoh {
color: white;
width: 600px;
background: #333;
padding: 5px;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
HTML:
<div id=”contoh”>
Efek bayangan atau shadow bisa terlihat dengan menggunakan browser Firefox, Safari, Chrome, Opera atau IE 9
</div>
Demo:
Efek bayangan sebenarnya cukup dengan “box-shadow” tetapi untuk membuatnya kompatible terhadapbrowser di atas maka di tambahkan “-moz-box-shadow” untuk mozilla dan “-webkit-box-shadow” untuk browser lainnya.
Parameter “5px 5px 5px #ccc” masing-masing menerangkan:
1. horizontal offset: jika angka ini positif maka efek bayangan atau shadow akan berada di sebelah kanan obyek, sedangkan jika negatif akan membuat shadow berada di sebaliknya yaitu disebelah kiri. Nilai “5” adalah besar area dari efek bayangan.
2. Vertical offset: jika angka ini positif maka efek bayangan atau shadow akan berada di bawah objek, sedangkan jika negatif maka bayangan berada di atas objek.
3. Blur radius, jika nilainya “o” maka efek bayagan akan nampak jelas, sedangkan jika diberi nilai dan semakin besar maka bayangan akan semakin kabur/ seperti efek blur di photoshop.
Bagaimana jika ingin membuat efek bayangan tepat berada di tengah-tengah objek?
Set nilai parameter pertama dan kedua menjadi “0px”
#contoh {
color: white;
width: 600px;
background: orange;
padding: 5px;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
Kunjungi www.proweb.co.id untuk menambah wawasan anda.