
Athatha…
#1 Bikin Frame Foto
Buat CSS class selector .polaroid dengan property sebagai berikut…div.polaroid { width: 250px; padding: 10px 10px 20px 10px; border: 1px solid #ddd; margin: 1em; background-color: #FFFFFF; -moz-box-shadow: 3px 3px 8px rgba(0,0,0,0.7); -webkit-box-shadow: 3px 3px 8px rgba(0,0,0,0.7); box-shadow: 3px 3px 8px rgba(0,0,0,0.7); }Class ini membentuk sebuah frame foto dengan lebar maksimal 250px.
#2 Bikin Wrapper Foto
Class selector .polaroid-foto digunakan untuk wrapping file gambar. Class ini di-apply di elemen IMG..post-body img.polaroid-foto { padding: 0; width: 250px; border: 1px solid #dde; }
#3 Bikin Caption
Caption berguna untuk memberikan keterangan pada foto.div.polaroid-caption { font-family: georgia "times new roman"; font-style: italic; text-align: center; color: #222222; }Sederhana saja, hanya set tulisan menjadi rata tengah. Caption hanya berisi beberapa kata saja, jangan terlalu banyak, karena akan merusak proporsi dan komposisi gambar.
#4 Bikin Selector Kemiringan
Nah, selanjutnya yang seru nih, CSS selector untuk memiringkan foto..miring-kanan { -webkit-transform: rotate(9deg); -moz-transform: rotate(9deg); transform: rotate(9deg); } .miring-kiri { -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg); transform: rotate(-9deg); }Sengaja ditulis dua, miring kanan dan kiri, langsung aja, ngga pake lama. OK sampai disini, bisa segera diimplementasikan.
Implementasi
Cara implementasinya gampang… Ambil contoh, kode implementasi untuk foto Athatha-kecil adalah seperti ini:<div class='polaroid miring-kanan'> <img class='polaroid-foto' src='http://lh5.ggpht.com/_GjkeDXkh9bM/TQQJOZ-v6_I/AAAAAAAAA4M/UaXg4Vo9MIs/s800/anak%20kecil0.png' title='Anak kecil'/> <div class='polaroid-caption'>Athallah maulana Rasyid</div> </div>Supaya proporsi gambarnya bagus, kalau bisa agak rajin dikit dengan melakukan editing foto. Bisa di-crop dengan rasio tinggi:lebar = 1:1.
Silakan cekidot foto #2: Ayayah Athatha-kecil…

Ayayah…
No comments:
Post a Comment