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

Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • 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>
  • DLS Kits 2022
    31/5/22
    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
      1/6/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau di Blogspot kayaknya mustahil.
  • Ahmad Shah Laupa
    24/5/22
    Profil: https://www.blogger.com/profile/08303282183553642554
    Mantap.... coba ahhh
  • 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
  • Manik Swadiaya
    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