Bingkai Foto dan Gambar Polaroid dengan CSS ala Igniel

Keberadaan gambar atau foto dalam sebuah blog menjadi hal yang tidak bisa dilepaskan. Selain menjadi nilai plus di mata Google, gambar juga menjadi faktor pelengkap yang membuat penjabaran dalam artikel menjadi lebih jelas. Misalnya saja dalam blog dengan tema tutorial, pengunjung lebih mudah mengikuti petunjuk dengan mengikuti alur yang ditampilkan dalam gambar.

Lalu dalam blog personal seperti blog sahabat saya Zoetami, sudah bisa dipastikan akan mengandung banyak gambar karena artikelnya ditulis berdasarkan pengalaman pribadi dengan foto sebagai dokumentasi pelengkap.

Tutorial kali ini bertujuan untuk menambahkan efek polaroid pada foto. Hasilnya bagus banget deh, ada kesan vintage dan retro-nya gitu. Dan script-nya pun super ringan karena hanya terdiri dari HTML dan CSS saja, maka support juga untuk template AMP.

Membuat Efek Foto Polaroid Vintage dari CSS

Pertama, tambahkan kode CSS ini DI ATAS </style> atau ]]></b:skin>.

/* Polaroid Photo Effect by igniel.com */
figure, figcaption {
display: block;
}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
#polaroid figure{
position:relative;
width: auto;
max-width: 400px; /* Lebar maksimal gambar */
margin: 20px auto 0px;
padding: 6px 8px 10px 8px;
display:inline-block;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background-color: #eee6d8;
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden;
}
#polaroid figure:nth-child(even) {
margin:20px 18px 20px 25px;
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#polaroid figure:before {
content: '';
display: block;
position: absolute;
left: 5px;
top: -10px;
width: 75px;
height: 25px;
z-index: 1;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#polaroid figure:nth-child(even):before {
left:unset;
right:10px;
top:-10px;
width: 55px;
height: 25px;
z-index: 1;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#polaroid img{
max-width: 100%;
width: 100%;
height: auto;
}
#polaroid figcaption{
text-align:center;
font-family: cursive, Arial, Helvetica, sans-serif;
color:#454f40;
font-style:italic;
letter-spacing:0.09em;
margin-top:10px;
}

max-width: 400px adalah lebar maksimal pada gambar. Jika ingin lebarnya otomatis mengikuti ukuran gambar asli, ubah menjadi max-width: 100%.

Lalu ketika menambahkan gambar, kamu WAJIB menggunakan HTML dengan format seperti ini.

<div id="polaroid">
  <figure>
    <img src="http://www.igniel.com/URL_GAMBAR_DISINI" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
    <figcaption>Caption gambar</figcaption>
  </figure>
</div>

Nantinya akan menghasilkan bingkai polaroid seperti di bawah ini.

Jika ingin membuat gambarnya berjejer ke samping, tuliskan tag HTML <figure> berulang (masih di dalam lingkup tag HTML <div id="polaroid">). Begini misalnya.

<div id="polaroid">
  <figure>
    <img src="http://www.igniel.com/URL_GAMBAR_SATU" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
    <figcaption>Caption gambar satu</figcaption>
  </figure>
  <figure>
    <img src="http://www.igniel.com/URL_GAMBAR_DUA" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
    <figcaption>Caption gambar dua</figcaption>
  </figure>
  <figure>
    <img src="http://www.igniel.com/URL_GAMBAR_TIGA" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
    <figcaption>Caption gambar tiga</figcaption>
  </figure>
</div>

Maka akan menghasilkan bingkai polaroid yang saling berdampingan seperti ini. Jika dibuka dari perangkat yang lebih kecil akan otomatis berbaris ke bawah (responsif). Gambar sengaja dikecilkan.

Tambahan

Kamu bisa menambahkan Google Font untuk membuat jenis text di caption foto terlihat lebih bagus lagi. Tambahkan CSS ini DI ATAS </style> atau ]]></b:skin>.

@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');

Lalu pada selector #polaroid figcaption, ubah value dari property font-family menjadi 'Reenie Beanie', cursive;.

#polaroid figcaption{
....
font-family: 'Reenie Beanie', cursive;
font-size: 1.75em; /* Tambahkan ini juga jika dirasa ukuran font terlalu kecil */
....
}

Jenis font pada caption akan jadi begini.

Okedeh cukup sekian tutorial CSS kali ini. Saya selalu bersemangat kalau sudah membahas trik-trik “sulap” pakai CSS. Semoga bisa menulis lebih banyak soal ini!

http://cssdemos.tupence.co.uk/image-polaroid.htm