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

16 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Made with Coffee
    31 Mei, 2022
    Profil: https://www.blogger.com/profile/10349774926788550050
    Mbak..bisa nggak bikin bingkai gambar yang jika di unduh atau disave...bingkai nya ikut kena juga..misalnya kayak punya detik com..soalnya susah banget cari tutornya..punya mbak yang ini juga hanya gambarnya saja yang kedownload..tapi bingkainya tertinggal..
    • Igniel
      01 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau di Blogspot kayaknya mustahil.
  • Ahmad Shah Laupa
    24 Mei, 2022
    Profil: https://www.blogger.com/profile/08303282183553642554
    Mantap.... coba ahhh
  • AlbinusTejoS
    27 November, 2021
    Profil: https://www.blogger.com/profile/14150598596002626212
    kereeeeen....
  • PayuBaco
    18 Februari, 2021
    Profil: https://www.blogger.com/profile/02293372772988889351
    Mantap mbak keren tutorialnya, izin pakai di blog saya.
  • Comnim
    16 Juli, 2019
    Profil: https://www.blogger.com/profile/02783821648632248475
    bisa di ganti bingkainya ga ya?
  • Imam Ibnu Badri
    11 Mei, 2019
    Profil: https://www.blogger.com/profile/15035723517372643914
    mbak cara membuat galeri foto didalam postingan bagaimana ?
  • Iman
    01 Februari, 2019
    Profil: https://www.blogger.com/profile/00782904345541375471
    Kalo yg goyang gimana mba?
    • Hendry Adriansyah
      24 Maret, 2019
      Profil: https://www.blogger.com/profile/01854856811653124371
      up mbak. Kalau geter2 itu gmn. atau kalau bisa kasih animasi lain kayak floating dsb
  • Manik Swadiaya
    29 Januari, 2019
    Profil: https://www.blogger.com/profile/13598715033776511417
    wah ini keren, cocok untuk yang gemar lomba blog, tampilan foto unik banget
  • Mas Dar
    24 Januari, 2019
    Profil: https://www.blogger.com/profile/03825156171958239756
    Cara install google sans gimn ya
  • Ely setiawan
    20 Januari, 2019
    Profil: https://www.blogger.com/profile/04921274668344702727
    ane pengin coba, siapa tau visitor makin banyak :v
  • Fahcri
    20 Januari, 2019
    Profil: https://www.blogger.com/profile/13118092079905957943
    Keren:voss
  • zoetami
    20 Januari, 2019
    Profil: https://www.blogger.com/profile/13339341516839172495
    Waw. Kerennn