ini adalah div dengan class = "shadow"
ini adalah div dengan class = "shadow2"
Yang kita tahu, kebanyakan teknik untuk membuat shadow/bayangan adalah dengan menggunakan image… atau image yang diedit dengan image editor.. biasanya sih bertipe PNG… tapi kali ini kita akan membuatnya pure elemen html yang dipadu dengna CSS, tanpa image!
Sebenernya sih CSS 3 udah ada properti buat bikin shadow, namanya -moz-box-shadow, tapi berhubung belum support di semua browser, jadi pikir-pikir dulu sebelum menggunakan CSS 3…
Hasilnya sangat bagus banget, tetapi ada kekurangannya… berhubung masih baru, maka fitur CSS 3 ini belum support di semua browser (coba sekarang liat blog ini pake IE/FF 3.0, pasti ga bakal ada bayangannya :P )
Kalo kita ingin membuat shadow box tersebut pake CSS2, pasti harus menggunakan image, soalnya di sana terlihat bahwa ada gradasi, kalo pake CSS2 itu tuh adalah image..
Untuk membuat shadow tanpa image di CSS2, div yang kita gunakan nggak 1, tapi ada div lagi di dalam div tertentu…
Contohnya html berikut, membuat suatu tulisan yang berada di dalam box, kemudian dibikin bayangan (shadow)nya kayak yang di atas…
berikut source nya
<style>
.shadow {
margin-top:30px;
margin-left:10px;
width:300px;
background:#eeeeee;
color:#444;
border:1px solid #DEDEDE;
-moz-box-shadow: 5px 5px 5px #ccc;
padding: 5px 20px 5px 20px;
}
.shadow2{
display: table;
background: #ccc;
}
.shadow2 div{
padding: 10px;
display: block;
border: 1px solid #ccc;
background: #fff;
margin: -3px 3px 3px -3px;
}
</style>
<div class="shadow">
<div>ini adalah div dengan class = "shadow"</div>
</div>
<div class="shadow2">
<div>ini adalah div dengan class = "shadow2"</div>
</div>
