Harian Cheyuz

Membuat Shadow Box di CSS Tanpa Image!

Posted on 25. Feb, 2010 by Cheyuz in CSS, Tutorial, _other

Kali ini, Cheyuz bakal ngasi trik buat temen-temen semua Sangat sangat banyak trik buat bikin shadow (bayangan untuk CSS), ada yang memakai image yang dikasi shadow di image editor seperti photoshop, ada yang dibuat image warna hitam transparan dan ditempel di CSS, dan lain-lain…

Sekarang Cheyuz mau ngasi trik buat kalian, khususnya web designer yang sering bergelut dengan styling di CSS, memainkan layout dan style buat tombol, form, notifikasi, dan lain-lain….. OK, kita mulai aja…

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…

.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;
}

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 )

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…

<div class="shadow2">
<div>ini adalah div dengan class = "shadow2"</div>
</div>

Ini CSSnya:

.shadow2{
    display: table;
    background: #ccc;
}
.shadow2 div{
    padding: 10px;
    display: block;
    border: 1px solid #ccc;
    background: #fff;
    margin: -3px 3px 3px -3px;
}

Maka hasilnya bakal kayak gini…

Kalo dipake buat gambar, misal html kayak gini:

<div class="shadow2">
<div><img src="http://www.cheyuz.com/images/link1.jpg" /></div>
</div>

maka hasilnya adalah kayak gini:

Contoh lain:

Sebenernya masih banyak alternatif lain selain pake teknik ini, tetapi menurutku cara ini yang paling efektif, karena ga pake image dan cara membuatnya sangat sederhana…

Tags: CSS, HTML, Tips, Tutorial, Web Developing