Efek Foto Polaroid Menggunakan Transform & Box Shadow

Iseng-iseng hari ini coba membuat efek foto polaroid yang tampil agak miring beberapa derajat, supaya halamannya jadi terlihat dinamis. Fotonya adalah file gambar sembarang aja. Transform adalah properti yang ada di CSS versi 3. Ada beberapa metode seperti rotate dan scale. Untuk iseng-iseng hari ini akan menggunakan rotate saja dan kombinasi box shadow supaya terkesan "timbul", seperti ini…

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…