Tips Membuat Kotak Berbayang dengan CSS
Tutorial Blog-CSS| Cara membuat kotak dengan efek shadow pada postingan blog tidak perlu menggunakan photoshop karena dengan CSS3 sudah dapat dilakukan. Tidak seperti pada Photoshop yang kita harus mengedit gambar menjadi mempunyai bayangan kemudian kita unggah di blog kita yang kadangkala membuat loading di blog menjadi berat, dengan CSS hanya memasukan kode tertentu efek bayangan pada kotak sudah dapat kita nikmati di blog kita. Selain itu tidak mempengaruhi berat loading.
Kotak berbayang di atas merupakan salah satu demo yang memanfaatkan CSS dalam pembuatannya. Jika anda tertarik ingin menerapkannya pada blog anda silahkan ikuti cara berikut ini.
1. Copy Paste kode CSS berikut di bawah <head> ketika anda menulis postingan baru.
2. Setiap anda ingin menampilkan efek berbayang pada kotak, anda gunakan kode berikut.
<div class=shadow
Style="width:200px">
Belajar membuat kotak berbayang dengan CSS 3
</div>
Perhatikan baris box-shadow: 8px 8px 4px #0c0c0c; 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. Warna Bayangan
Pada contoh ditentukan warna bayangan adalah #0c0c0c.
Baris Kedua, yaitu background-color:#00ff00; berfungsi untuk mendefinisikan warna background.
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.
Sekian Tutorial Blog-CSS tentang cara membuat kotak berbayang pada postingan blog yang bisa saya bagikan kali ini. Semoga bermanfaat dan sebagai pengunjung yang baik tidak ada salahnya memberikan komentar setelah membaca tulisan di atas. Terima kasih atas perhatiannya dan sampai jumpa lagi di postingan saya selanjutnya. Salam...
No comments: