Bingkai Foto dan Gambar Polaroid dengan CSS ala Igniel

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="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.

My camera
My camera

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="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 seperti ini. Jika dibuka dari perangkat yang lebih kecil akan otomatis berbaris ke bawah (responsif). Gambar sengaja dikecilkan.

Tulis Judul yang SEO Friendly
This cat is so cute
You are so funny!
You are so funny!
Be happy :)
Be happy :)


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.

Tulis Judul yang SEO Friendly
This cat is so cute


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

Artikel Terkait

13 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • AlbinusTejoS
    27/11/21
    Profil: https://www.blogger.com/profile/14150598596002626212
    kereeeeen....
  • PayuBaco
    18/2/21
    Profil: https://www.blogger.com/profile/02293372772988889351
    Mantap mbak keren tutorialnya, izin pakai di blog saya.
  • Comnim
    16/7/19
    Profil: https://www.blogger.com/profile/02783821648632248475
    bisa di ganti bingkainya ga ya?
  • Imam Ibnu Badri
    11/5/19
    Profil: https://www.blogger.com/profile/15035723517372643914
    mbak cara membuat galeri foto didalam postingan bagaimana ?
  • Iman
    1/2/19
    Profil: https://www.blogger.com/profile/00782904345541375471
    Kalo yg goyang gimana mba?
    • Hendry Adriansyah
      24/3/19
      Profil: https://www.blogger.com/profile/01854856811653124371
      up mbak. Kalau geter2 itu gmn. atau kalau bisa kasih animasi lain kayak floating dsb
  • 3835info keneketo
    29/1/19
    Profil: https://www.blogger.com/profile/13598715033776511417
    wah ini keren, cocok untuk yang gemar lomba blog, tampilan foto unik banget
  • Mas Dar
    24/1/19
    Profil: https://www.blogger.com/profile/03825156171958239756
    Cara install google sans gimn ya
  • Ely setiawan
    20/1/19
    Profil: https://www.blogger.com/profile/04921274668344702727
    ane pengin coba, siapa tau visitor makin banyak :v
  • Fahcri
    20/1/19
    Profil: https://www.blogger.com/profile/13118092079905957943
    Keren:voss
  • Zoetami
    20/1/19
    Profil: https://www.blogger.com/profile/13339341516839172495
    Waw. Kerennn
    • Xaqhala
      18/3/19
      Profil: https://www.blogger.com/profile/07470943163693575979
      bner, kereen
    • Rifqi
      7/1/22
      Profil: https://www.blogger.com/profile/03775497476898070231
      ada zoetami