Membuat Shadow Box di CSS Tanpa Image

Level: BASIC

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…

ini adalah div dengan class = “shadow”

.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…

ini adalah div dengan class = “shadow2″

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:

Ini adalah properti2 yang berperan penting di sini:

display: table, supaya si container itu selalu mempunyai lebar sesuai dengan div di atasnya
margin: -3px 3px 3px -3px;, supaya si div yang bertuliskan tersebut digeser ke sebelah kiri -3px, atas 3px, kanan 3px, dan kiri -3px.. sangat berfungsi buat kita nentuin positioning juga…

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…

Untuk inspirasi desain dengan CSS, boleh liat situsku di Cheyuz’s Site

This entry was posted on Thursday, February 25th, 2010 at 23:41 and is filed under CSS, Tutorial, _other. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

majesty

Feb 26th

kalo -moz-box-shadow cuman kerja di beberapa broeswe aja,,
safari ga bisa,,
unruk mengatasinya gunakan:

-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;

(-webkit adalah versi dari safari)
Cheyuz

Feb 28th

sip2… thankz tambahannya ya…
Glenn

Mar 18th

thx tutorialnya.. sangat membantu saya..

tp saya ada probelm menggunakan shadow ini.. saya pakai shadow ini untuk table, dgn code seperti ini :

….

sebelum menggunakan class shadow, table terletak di tengah, tp setelahnya, table jadi teletak di pinggir kiri (align center tidak bekerja).. ada saran supaya table kembali ke tengah? thx..
Cheyuz

Mar 27th

tidak disarankan untuk table, pake div aja…
sukekeppap

Jan 3rd

gan, bahas tentang halaman yg dilebarin trus jadi berantakan itu dong… caranya gimana ya biar tetep tatanannya?? *maaf menyimpang pada topik
Cheyuz

Jan 10th

@sukekeppap: mksudnya gmn neng?
denny

Aug 25th

kalo shadow box nya jadi HEADER gmn?
maish newbiie nii
Cheyuz

Oct 31st

kalo shadow box nya jadi HEADER gmn?
maish newbiie nii

@denny: maksudnya gimana mas?
anak ganteng

Nov 15th

mantap mas bro,,,,tanks

Harian Cheyuz