Cara Membuat Bingkai Foto Polaroid dengan CSS

Keberadaan gambar atau foto dalam sebuah blog menjadi hal yang tidak bisa ditinggalkan. Selain untuk menjadi faktor pelengkap yang membuat penjabaran dalam artikel menjadi lebih jelas. Saya ambil contoh blog dengan tema tutorial, pengunjung lebih mudah mengikuti petunjuk dengan mengikuti alur yang ditampilkan dalam gambar.

Anda bisa lihat blog niche fotography, sudah dipastikan akan mengandung banyak gambar karena artikelnya ditulis berdasarkan pengalaman pribadi dengan foto sebagai dokumentasi pelengkap.

Untuk tutorial kali ini bertujuan untuk menambahkan efek polaroid pada foto. Hasilnya bagus banget seperti ada kesan vintage dan retro-nya. Script pun super ringan karena hanya terdiri dari CSS dan HTML saja. Ini support juga untuk template AMP kok.

Baca Juga: Membuat Tombol dengan Efek Ripple Material Design dengan CSS

Membuat Efek Foto Polaroid Vintage dari CSS

Langkah Pertama: Tambahkan kode CSS ini diatas </style> atau ]]></b:skin>.

/* Polaroid Frame on Images by masmalven.com */
figure, figcaption {
display: block;
}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
#polaroid img{
max-width: 100%;
width: 100%;
height: auto;
}
#polaroid figure{
position:relative;
width: auto;
max-width: 600px; /* 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 figcaption{
text-align:center;
font-family: 'Reenie Beanie', cursive;
font-size:1.75em;
color:#454f40;
letter-spacing:0.09em;
margin-top:10px;
}

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

Kemudian ketika menambahkan gambar, kamu wajib menggunakan HTML dengan format seperti ini.

<div id="polaroid">
  <figure>
    <img src="URL GAMBAR DISINI" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
    <figcaption>Caption Gambar</figcaption>
  </figure>
</div>

Hasil bingkai polaroid seperti di bawah ini.

Jika kamu ingin membuat gambarnya sejajar kesamping, maka tuliskan tag HTML <figure> berulang (masih di dalam lingkup tag HTML <div id="polaroid">). Contohnya seperti ini di bawah ini.

<div id="polaroid">
  <figure>
    <img src="URL GAMBAR SATU" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
    <figcaption>Caption Gambar Satu</figcaption>
  </figure>
  <figure>
    <img src="URL GAMBAR DUA" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
    <figcaption>Caption Gambar Dua </figcaption>
  </figure>
  <figure>
    <img src="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. Jika kamu ingin membuka dari perangkat seluler maka otomatis akan berbaris ke bawah (responsive). Di bawah ini hanya contoh ya..

Tambahan

Untuk hasil yang lebih bagus, kamu bisa menambahkan Google Font untuk membuat jenis text di caption foto. Kamu tambahkan CSS ini diatas </style> atau ]]></b:skin>.

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

Kemudian 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 */
....
}

Untuk jenis font pada caption akan seperti di bawah ini. Kamu bisa lihat hasilnya di CODEPEN saya.

Demikian tutorial CSS kali ini. Semoga bermanfaat dan terima kasih atas kunjungan Anda.

Berbagi :