Buat Bingkai Foto Seperti Polaroid dengan CSS

Buat Bingkai Foto Seperti Polaroid dengan CSS - Gambar dan foto merupakan salah satu hal yang wajib ditampilkan dalam sebuah blog, hal ini biasa digunakan untuk memperjelas isi dari artikel yang kita buat. Saat ini banyak sekali jenis gambar yang bisa kita gunakan untuk memperindah gambar, Setelah beberapa waktu yang lalu kita membahas Cara Agar Gambar Blog Bergerak Ketika Disentuh pada kali ini saya akan membagikan cara membuat bingkai foto seperti polaroid menggunakan CSS. Perlu diketahui bahwa tutorial ini saya dapat dari blogger terkenal yang namanya tidak asing lagi di dunia perbloggeran, ya siapa lagi kalau bukan  mbak Igniel. Untuk lebih jelaskan silahkan lihat gambar dibawah ini.

Demo Gambar Polaroid

Cara membuat bingkai foto seperti polaroid menggunakan CSS

1. Buka Blogger > Tema > Edit HTML.

2. Silahkan copy kode CSS dibawah ini kemudian letakkan diatas kode </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 merupakan lebar maksimal pada gambar, jika sobat ingin lebar mengikuti gambar asli yang sobat upload silahkan ganti menjadi max-width: 100%.

3. Silahkan simpan.

Cara menerapkannya pada postingan

Jika sobat ingin menggunakannya pada sebuah postingan sobat tinggal copy kode dibawah 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>

Maka hasilnya akan menjadi seperti ini.

Contoh

Atau sobat bisa menggunakan 2 atau 3 gambar sekaligus kodenya dibawah 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>

Hasilnya akan menjadi seperti ini.

Caption gambar satu

Caption gambar dua

Caption gambar tiga

Jika ingin menghapus caption gambar silahkan sobat hapus kode <figcaption>Caption gambar</figcaption>.

Gimana nih ngomong-ngomong mudah bukan, hal ini akan membuat blog kalian terlihat lebih aestetic apalagi jika diblog kalian memang sering share foto kehidupan sehari-hari kalian, dijamin bakal bikin pembaca betah deh. Oke cukup sampai sini dulu tutorial cara membuat bingkai foto seperti polaroid dengan CSS, saya berharap tutorial ini bisa berguna bagi sobat semua yang membutuhkan. Terima kasih telah berkunjung ke blog ini, silahkan meninggalkan komentar jika dirasa perlu dan saya pastikan saya akan melakukan kunjungan balik ke blog sobat. Terima kasih dan sampai jumpa diartikel selanjutnya, Ayo membaca bersama PayuBaco.