Membuat Album Polaroid dengan CSS3

Menampilkan galeri photo disitus atau blog dapat menambah ciri khas tersendiri. Jika anda memiliki blog pribadi, tentu saja akan membanggakan bisa menampilkan photo-photo bersama keluarga tercinta, bersama sahabat ataupun hanya sekedar menampilkan photo kegiatan.

Nah yang banyak menjadi kendala adalah ketika akan menampilkannya kedalam blog/situs dengan mudah dan memiliki tampilan yang elegan seperti Contoh dibawah. Pada contoh ini, saya menampilkan photo-photo galeri dengan cara yang sangat mudah, tanpa harus menambahkan javascript, atau menambahkan widget dan plugin yang notabene akan membuat akses ke blog menjadi lambat.

Mau Tau Caranya ?

Untuk membuat Album Polaroid ini cukup mudah, karena tidak memerlukan javascript, tetapi hanya menggunakan CSS. Let go do it.

1. Siapkan beberapa gambar untuk album anda. Untuk menghasilkan album yang bagus sebaiknya dimensi gambar harus sama besar. Saya menggunakan ukuran 300 x 300 pixel. Lalu upload gambar tersebut.

2. Masukkan gambar kedalam halaman web atau blog dengan format penulisan seperti dibawah ini :

<ul class="polaroids">

<li>

<a href="http://www.situs-anda.com" title="At Home!">

<img src="www.situs-anda.com/polaroid01.jpg" alt="At Home!" /></a>

</li>

<li>

<a href="http://www.situs-anda.com" title="Sun Flower">     <img src="www.situs-anda.com/polaroid02.jpg" alt="Sun Flower" /></a>

</li>

<li>

<a href="http://www.situs-anda.com" title="Shop Alba">

<img src="www.situs-anda.com/polaroid03.jpg" alt="Shop Alba" /></a>     </li>

</ul>

3. Lalu Copy + Paste kode CSS dibawah ini sebelum tag </head> :

<style type="text/css">

ul.polaroids { width: 500px; margin: 0 0 18px -30px; }

ul.polaroids li { display: inline; }

ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Impact", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }

ul.polaroids img { display: block; width: 100px; margin-bottom: 12px; }

ul.polaroids a:after { content: attr(title); }

ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }

ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }

ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }

ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }

ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }

ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }

ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }

</style>

4. Lakukan penyesuaian kode CSS untuk menyesuaikan tampilan dengan template yang anda gunakan.

• ul.polaroids { width: 500px; …. } // ubahlah angka 500px untuk menyesuaikan lebar tempat gambar
• ul.polaroids a { …. font-family: "Impact", …. } // untuk merubah jenis font yang digunakan ubahlah IMPACT menjadi font yg anda sukai, contoh, Arial, Verdana, Tahoma, dll
• ul.polaroids img { …. width: 100px; …. } // ubah angka 100px sesuai dengan besar gambar yang ingin ditampilkan.
• Untuk pengaturan lain silahkan dicoba sendiri 🙂

Selamat Mencoba.