Membuat Efek Polaroid Pada Gambar di Blog Dengan CSS

Diposting pada
Membuat Efek Polaroid Pada Gambar di Blog Dengan CSS
Source image by Igniel.Com

Membuat Efek Polaroid Pada Gambar di Blog Dengan CSS – Biasa nya efek polaroid ini di gunakan untuk membuat foto kamu terlihat jadi lebih menarik. Tentu nya dengan cara edit melalui aplikasi android atau bisa langsung dengan menggunakan Kamera polaroid yang dapat mencetak langsung hasil gambar yang di ambil.

Tapi di artikel ini saya tidak membahas tentang efek polaroid dalam foto. Disini saya akan menjelaskan cara membuat efek polaroid pada gambar di blog dengan css. Efek polaroid ini cocok banget buat blog kamu yang isi nya banyak menampilkan gambar.

Dan bila kamu ingin mencoba nya silahkan ikuti langkah langkah nya sebagai berikut.

Membuat Efek Polaroid Pada Gambar di Blog Dengan CSS

Silahkan copy kode CSS dibawah ini, lalu letakan kode tersebut di atas kode </style> atau ]]></b:skin> pada template yang kamu gunakan.

/* 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;
}

NOTE: max-width: 400px adalah lebar maksimal pada gambar. Jika ingin lebarnya otomatis mengikuti ukuran gambar asli, ubah menjadi max-width: 100%

Dan gunakan kode HTML dibawah ini setiap kali kamu menambahkan gambar pada blog.

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

Dan jika kamu ingin buat gambar berjejer kesamping, tuliskan tag HTML <figure> berulang (masih di dalam lingkup tag HTML <div id=”polaroid”>). Contohnya seperti 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>

DEMO

Tambahan

Bila kamu ingin menambahkan Google Font untuk membuat jenis text di caption nya agar terlihat lebih menarik. Silahkan tambahkan CSS ini di atas kode </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 */
....
}

Dan yang terakhir, selamat mencoba.

Itulah Cara Membuat Efek Polaroid Pada Gambar di Blog Dengan CSS yang patut kamu coba untuk membuat blog kamu menjadi lebih menarik dari biasanya. Bila ada pertanyaan menyangkut isi dari artikel di atas, silahkan tinggalkan komentar kamu dibawah.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *