Membuat Bingkai Foto Seperti Polaroid dengan CSS

 



Hi Sobat Ngehits! kembali lagi di Ini Hits. Kali ini Ini Hits akan berbagi tutorial Cara Membuat Bingkai Foto Seperti Polaroid dengan CSS.

Gambar atau foto adalah 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, salah satunya dengan membuat bingkai foto seperti polaroid menggunakan CSS. Untuk contohnya silahkan lihat gambar dibawah ini.

Tulis Judul yang SEO Friendly
Contohnya

Kode script pada tutorial ini saya dapat dari blogger terkenal yang namanya tidak asing lagi di dunia perbloggeran yaitu Igniel. bagi yang penasaran dengan blognya bisa kunjungi blog Igniel. Pastikan sobat mengcopy semua kode yang disediakan agar dapat berjalan dengan baik. Oke langsung saja kita ke tutorialnya.

 

Cara membuat bingkai foto seperti polaroid menggunakan CSS

1.      Buka Blogger >> Tema >> Edit HTML.

2.      Tambahkan kode CSS dibawah ini, letakan 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: &amp;amp;#039;&amp;amp;#039;;

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%.

{alertInfo}

 

3.      Simpan Tema

 

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:

Tulis Judul yang SEO Friendly
Seperti Ini Hasilnya Guys

 

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:

Tulis Judul yang SEO Friendly
Caption gambar satu
Tulis Judul yang SEO Friendly
Caption gambar dua
Tulis Judul yang SEO Friendly
Caption gambar tiga

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


{alertInfo}

 

Gimana guys tutorial cara membuatnya, mudah bukan? Jika ingin menerapkannya pada blog sobat, pastikan dengan seksama tutorial diatas. Demikian tutorial Cara membuat bingkai foto seperti polaroid menggunakan CSS. Terima kasih sudah mengikuti tutorialnya, semoga bermanfaat.

Ini Hits

✉️ info.inihits@gmail.com for personal or business inquiry

Posting Komentar

Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator seperti diatur dalam UU ITE. Kebijakan Komentar

Lebih baru Lebih lama