Kotak Berbayang Dengan CSS 3

Eko kembali untuk sobat semua dengan membawa tips web design, setelah sekian lama tidak posting tentang web design, langsung aja yuk kita ke TKP, dari pada banyak basa basi tapi gak mudeng....

Belajar membuat kotak berbayang dengan CSS 3
di eko-tipsntrick.blogspot.com

Setelah melihat halaman web yang memiliki kotak dengan efek berbayang (drop shadow) seperti diatas, sekilas mungkin sobat berpikir bahwa sobat memerlukan campur tangan Photoshop untuk membuat gambar kotak berbayang. Namun, ternyata sobat dapat melakukannya tanpa menggunakan gambar apa pun, murni CSS. Hal ini dimungkinkan melalui fitur baru CSS 3 , yang mendukung property box-shadow. Potongan kodedi bawah ini adalah class untuk membuat kotak berbayang tersebut.

.shadow {
Box-shadow: 8px 8px 4px #fc0208;
Background-color:#0208fc;
color:#02fc31;
}

Perhatikan baris box-shadow: 8px 8px 4px #fc0208; yang membentuk efek kotak berbayang. Property box-shadow memiliki empat parameter/atribut sebagai berikut. 

1. Offset Horizontat Bayangan

8px seperti contoh berarti bayangan kotak bergeser sebesar 8 pixel secara horizontal ke sebelah kanan. Jika parameter bernilai negatif, bayangan akan tampil disebelah kiri kotak. 

2. Offset Vertikal Bayangan

8px seperti pada contoh berarti bayangan kotak bergeser sebesar 8 pixel secara vertikal ke bawah. Jika parameter bernilai negatif, bayangan akan tampil pada atas kotak. 

3. Radius Blur

Semakin besar nilai ini, bayangan akan semakin blur. Jika 0px, akan didapatkan bayangan yang solid tanpa ada efek blur. Pada contoh di atas digunakan radius blur sebesar 4 pixel. 

4. Waran Bayangan

Pada contoh ditentukan warna bayangan adalah #fc0208.

Baris Kedua, yaitu background-color:#0208fc; berfungsi untuk mendefinisikan warna background. Bagaimana penggunaanya sehingga menghasilkan tampilan seprti pada gambar diatas?

Baris ketiga, yaitu color:#02fc31; berfungsi memberi warna teks bisa disesuaikan dengan template sobat

Berikut kode lengkapnya. Simpan dalam sebuah file HTML dan jalankan pada Browser Sobat.

<style type="text/css">
.shadow {
Box-shadow: 8px 8px 4px #fc0208;
Background-color:#0208fc;
color:#02fc31;
}
</style>

<div>


<div class="shadow" style="width: 200px;">
Belajar membuat kotak berbayang dengan CSS 3
di eko-tipsntrick.blogspot.com</div>
</div>

Sudah mudeng sobat tinggal save aja broww

Sobat dapat menggunakan class .shadow yang telah didefinisikan tersebut dengan perintah <div class=shadow> lalu mengetikkan teks yang merupakan konten di dalam kotak tersebut. Pemasalahan selanjutnya adalah bagaimana membuat lebih dari satu kotak berbayang lengan lebar (width) berbeda?
Tentu sobat memiliki beberapa alrenatif, misalnya membuat table dengan width tertentu. Namun, cara yang cukup praktis adalah kembali menggunakan Css.
Perhatikan kembali kode HTML lengkap diatas. Baris <div class=shadow style=”width:200px”> merupakan pemanggilan class .shadow dengan membatasi isi konten dalam div sebesar 200 pixel. Pemanggilan CSS dengan atribut style ini disebut dengan Inline Styles.

Cukup sudah tips yang saya berikan di kesempatan kali ini ya sob, mata saya sudah lelah, tubuh lemas, pengin istirahat, n akhirnya.... Terimakasih ya sob, semoga bermanfaat. ^_^

Sumber : http://www.rieztoshare.com/