Shadow Effect dengan CSS3
Sedikit berbagi tips n trick tentang CSS, baru saja ketemu tadi pagi. 
Sesuai dengan namanya kita akan mencoba membuat efek bayangan di CSS, dengan CSS ini kita dapat mengantikan pembuatan efek bayangan yang biasanya mengunakan slicing pada gambar. 
. Langsung aja, n aku coba buat simple.
Pada body di HTML kita buat 2 div, agar kita bisa mengenal perbedaan hasil pada tiap syntaxnya
penampakan 1:
<div id="korban1"> <p>ini adalah penerapan box-shodow pertamax ku</p> </div> <div id="korban2"> <p>ini adalah penerapan box-shodow keduax ku</p> </div>
klo sudah kita beralih ke <head></head>, di sini kita akan mencoba membuat style shodow untuk kedua korban kita, 
<style>
#korban1 {
-moz-box-shadow: 5px 10px 5px #acacac;
box-shadow: 10px 10px 5px #000;
-webkit-box-shadow: 10px 10px 5px #000;
border-radius: 10px;
-moz-border-radius: 10px;
width: 300px;
padding: 10px;
background: #ff1a50;
margin-bottom: 30px;
}
#korban2 {
-moz-box-shadow: -10px -5px 10px #acacac;
box-shadow: -10px -5px 10px #acacac;
-webkit-box-shadow: -10px -5px 10px #acacac;
border-radius: 10px;
-moz-border-radius: 10px;
width: 300px;
padding: 10px;
background: #4448ff;
}
</style>
ini dia penampakannya..
Well disini kita bisa melihat perbedaan di bayangannyakan, sebenarnya gampang aja.
box-shadow: 10px(posisi x) 10px(posisi y) 5px(tingakt keburamananya) #000(warna bayangan);
bisa juga mengunakan (-) untuk membuatnya ke kiri atau ke atas.
contoh:
box-shadow: -10px(posisi x) -10px(posisi y) 5px(tingakt keburamananya) #000(warna bayangan);
yang jadi masalah, aq bingung kenapa kadang di IE 8 saya g berubah. kalau ada saran talong di beri tau ya.
Yess…
Sekarang kita sudah bisa membuat efek bayangan pada CSS. Selamat mencoba.
NB:
- File dapat di download di sini
- Untuk mepercantik kotak saya gunakan border-radius, bisa di baca di sini
Postingan Terkait
- None Found
2 komentar di “Shadow Effect dengan CSS3”
Tinggalkan Komentar
finnfirrior
Telah Menulis 6.
Hanya seorang mahasiswa biasa, yang mencintai dunia design. Bercita2 ingin menjadi seorang yang ahli di bidang web dan printable design. Sekarang sedang mendalami dunia web design.
wew. Penjelasan yang detil. Aq sering banget lupa value yang kesatu dua dan tiga itu buat apa. Jadi untuk bikin shadow yang benar-benar pas, mesti trial-eror dulu gonta-ganti valuenya.
sep kan..
lagi mengexplor css3 yang baru,
klo ketemu yang unique2 nti tak posting lebih banyak.