Cara Bikin Bingkai Foto Dan Gambar Polaroid Dengan Kode CSS
Membuat bingkai (frame) untuk gambar pada halaman artikel blog sedikit vintage dan retro art style menggunakan efek bingkai (frame) polaroid untuk foto dan gambar. Cara penggunaannya pun sangat mudah, cukup menggunakan kode CSS tanpa perlu coding javascript. Yuk kita simak infonya...
Jika kebetulan blog kamu bertemakan fotografi dan ingin memiliki tampilan frame gambar yang ada di artikel blog sedikit nyeni dan unik??? coba deh gunakan trik kode CSS untuk efek frame foto polaroid ini. Seperti yang kita ketahui keberadaan gambar atau foto dalam sebuah blog menjadi hal yang tidak bisa ditinggalkan. Selain untuk menjadi faktor pelengkap yang membuat penjabaran dalam artikel menjadi lebih jelas, keberadaan gambar dalam artikel blog akan membuat tampilan artikel menjadi dinamis dan tidak membosankan.
Kode CSS untuk Bingkai (frame) Foto Polaroid ini sudah dibuat responsive dengan pengaturan rasio gambar yang otomatis sehingga bingkai (frame) gambar foto akan mengikuti bentuk gambar yang kamu gunakan apakah itu dalam mode portrait ataupun menggunakan mode landscape. Penggunaan kode CSS untuk Bingkai (Frame) Foto Polaroid ini juga fleksible jadi masih disesuaikan dan dimodifikasi dengan mudah untuk disesuaikan dengan kebutuhan anda.
Contoh penggunaan kode CSS efek bingkai (frame) foto polaroid dapat dilihat pada gambar di bawah ini.
klik gambar untuk melihat koleksi foto
Pada contoh gambar di atas, walaupun foto tidak menggunakan kamera DSLR namun hasil tampilan akan menjadi sangat unik dan menarik. Hanya dengan penggunaan efek frame foto polaroid tampilan dari gambar akan menjadi terlihat berbeda. Sebagai pembanding berikut foto yang sama tanpa penggunaan efek frame foto polaroid.
Gimana menurut sobat blogger, terasa berbeda-kan hasil tampilannya atau tidak berbeda sama sekali ??? oke deh apapun pendapat kamu silakan ditulis pada kolom komentar.
Oke langsung aja buat yang tertarik untuk memasang efek frame foto polaroid ini silakan disimak info tutorialnya di bawah ini.
Jika kebetulan blog kamu bertemakan fotografi dan ingin memiliki tampilan frame gambar yang ada di artikel blog sedikit nyeni dan unik??? coba deh gunakan trik kode CSS untuk efek frame foto polaroid ini. Seperti yang kita ketahui keberadaan gambar atau foto dalam sebuah blog menjadi hal yang tidak bisa ditinggalkan. Selain untuk menjadi faktor pelengkap yang membuat penjabaran dalam artikel menjadi lebih jelas, keberadaan gambar dalam artikel blog akan membuat tampilan artikel menjadi dinamis dan tidak membosankan.
Kode CSS untuk Bingkai (frame) Foto Polaroid ini sudah dibuat responsive dengan pengaturan rasio gambar yang otomatis sehingga bingkai (frame) gambar foto akan mengikuti bentuk gambar yang kamu gunakan apakah itu dalam mode portrait ataupun menggunakan mode landscape. Penggunaan kode CSS untuk Bingkai (Frame) Foto Polaroid ini juga fleksible jadi masih disesuaikan dan dimodifikasi dengan mudah untuk disesuaikan dengan kebutuhan anda.
Contoh penggunaan kode CSS efek bingkai (frame) foto polaroid dapat dilihat pada gambar di bawah ini.
Pada contoh gambar di atas, walaupun foto tidak menggunakan kamera DSLR namun hasil tampilan akan menjadi sangat unik dan menarik. Hanya dengan penggunaan efek frame foto polaroid tampilan dari gambar akan menjadi terlihat berbeda. Sebagai pembanding berikut foto yang sama tanpa penggunaan efek frame foto polaroid.
Gimana menurut sobat blogger, terasa berbeda-kan hasil tampilannya atau tidak berbeda sama sekali ??? oke deh apapun pendapat kamu silakan ditulis pada kolom komentar.
Oke langsung aja buat yang tertarik untuk memasang efek frame foto polaroid ini silakan disimak info tutorialnya di bawah ini.
Informasi Singkat
Film instan adalah jenis film fotografi yang diperkenalkan oleh Polaroid Corporation untuk menghasilkan gambar yang terlihat dalam beberapa menit atau detik dari eksposur foto. Film berisi bahan kimia yang diperlukan untuk mengembangkan dan memperbaiki foto, dan kamera mengekspos dan memulai proses pengembangan setelah foto diambil.
Dalam kamera instan Polaroid sebelumnya, film ditarik melalui rol yang membuka polong yang berisi reagen yang tersebar di antara lembar negatif yang terbuka dan menerima lembar positif. Sandwich film ini berkembang selama beberapa waktu setelah lembar positif dikupas dari negatif untuk mengungkapkan foto yang dikembangkan. Pada tahun 1972, Polaroid memperkenalkan film integral, yang menggabungkan waktu dan menerima lapisan untuk secara otomatis mengembangkan dan memperbaiki foto tanpa campur tangan fotografer.
Film instan telah tersedia dalam ukuran mulai dari ukuran 24 mm × 36 mm (0,94 inci × 1,42 inci) (mirip dengan 135 film) hingga ukuran 50,8 cm × 61 cm (20 inci × 24 inci), dengan ukuran film terpopuler bagi konsumen foto berukuran sekitar 83 mm × 108 mm (3,3 inci × 4,3 inci) (gambar itu sendiri lebih kecil karena dikelilingi oleh bingkai). Film instan awal didistribusikan dalam bentuk gulungan, tetapi kemudian dan film saat ini disediakan dalam kemasan 8 atau 10 lembar, dan film lembaran tunggal untuk digunakan dalam kamera format besar dengan bagian belakang yang kompatibel.
Meskipun kualitas film instan integral tidak setinggi film konvensional, namun film hitam putih terkelupas, dan sedikit banyak film berwarna mendekati kualitas jenis film tradisional. Film instan digunakan ketika tidak diinginkan harus menunggu gulungan film konvensional selesai dan diproses, misalnya, mendokumentasikan bukti dalam penegakan hukum, dalam perawatan kesehatan dan aplikasi ilmiah, dan menghasilkan foto untuk paspor dan dokumen identitas lainnya, atau hanya agar snapshot dapat segera dilihat. Beberapa fotografer menggunakan film instan untuk bidikan percobaan, untuk melihat bagaimana sebuah subjek atau penyiapan terlihat sebelum menggunakan film konvensional untuk eksposur akhir. Film instan juga digunakan oleh seniman untuk mencapai efek yang tidak mungkin dicapai dengan fotografi tradisional, dengan memanipulasi emulsi selama proses pengembangan, atau memisahkan emulsi gambar dari dasar film. Film instan telah digantikan untuk sebagian besar tujuan oleh fotografi digital, yang memungkinkan hasilnya untuk dilihat langsung pada layar tampilan atau dicetak dengan sublimasi pewarna, inkjet, atau laser rumahan atau printer profesional.
Film instan terkenal karena memiliki rentang kecepatan film yang lebih luas daripada film negatif lain pada era yang sama, yang telah diproduksi dalam ISO 4 hingga ISO 20.000. [Rujukan?] Format film instan saat ini biasanya memiliki ISO antara 100 dan 1000. [butuh rujukan]
Dua perusahaan saat ini memproduksi film instan: Fujifilm, dengan film integral Instax untuk kamera Instax, dan Polaroid (sebelumnya The Impossible Project) untuk kamera Polaroid lama (600, SX-70, dan 8 × 10) dan kamera I-Type-nya.
Sumber : Wikipedia
Film instan adalah jenis film fotografi yang diperkenalkan oleh Polaroid Corporation untuk menghasilkan gambar yang terlihat dalam beberapa menit atau detik dari eksposur foto. Film berisi bahan kimia yang diperlukan untuk mengembangkan dan memperbaiki foto, dan kamera mengekspos dan memulai proses pengembangan setelah foto diambil.
Dalam kamera instan Polaroid sebelumnya, film ditarik melalui rol yang membuka polong yang berisi reagen yang tersebar di antara lembar negatif yang terbuka dan menerima lembar positif. Sandwich film ini berkembang selama beberapa waktu setelah lembar positif dikupas dari negatif untuk mengungkapkan foto yang dikembangkan. Pada tahun 1972, Polaroid memperkenalkan film integral, yang menggabungkan waktu dan menerima lapisan untuk secara otomatis mengembangkan dan memperbaiki foto tanpa campur tangan fotografer.
Film instan telah tersedia dalam ukuran mulai dari ukuran 24 mm × 36 mm (0,94 inci × 1,42 inci) (mirip dengan 135 film) hingga ukuran 50,8 cm × 61 cm (20 inci × 24 inci), dengan ukuran film terpopuler bagi konsumen foto berukuran sekitar 83 mm × 108 mm (3,3 inci × 4,3 inci) (gambar itu sendiri lebih kecil karena dikelilingi oleh bingkai). Film instan awal didistribusikan dalam bentuk gulungan, tetapi kemudian dan film saat ini disediakan dalam kemasan 8 atau 10 lembar, dan film lembaran tunggal untuk digunakan dalam kamera format besar dengan bagian belakang yang kompatibel.
Meskipun kualitas film instan integral tidak setinggi film konvensional, namun film hitam putih terkelupas, dan sedikit banyak film berwarna mendekati kualitas jenis film tradisional. Film instan digunakan ketika tidak diinginkan harus menunggu gulungan film konvensional selesai dan diproses, misalnya, mendokumentasikan bukti dalam penegakan hukum, dalam perawatan kesehatan dan aplikasi ilmiah, dan menghasilkan foto untuk paspor dan dokumen identitas lainnya, atau hanya agar snapshot dapat segera dilihat. Beberapa fotografer menggunakan film instan untuk bidikan percobaan, untuk melihat bagaimana sebuah subjek atau penyiapan terlihat sebelum menggunakan film konvensional untuk eksposur akhir. Film instan juga digunakan oleh seniman untuk mencapai efek yang tidak mungkin dicapai dengan fotografi tradisional, dengan memanipulasi emulsi selama proses pengembangan, atau memisahkan emulsi gambar dari dasar film. Film instan telah digantikan untuk sebagian besar tujuan oleh fotografi digital, yang memungkinkan hasilnya untuk dilihat langsung pada layar tampilan atau dicetak dengan sublimasi pewarna, inkjet, atau laser rumahan atau printer profesional.
Film instan terkenal karena memiliki rentang kecepatan film yang lebih luas daripada film negatif lain pada era yang sama, yang telah diproduksi dalam ISO 4 hingga ISO 20.000. [Rujukan?] Format film instan saat ini biasanya memiliki ISO antara 100 dan 1000. [butuh rujukan]
Dua perusahaan saat ini memproduksi film instan: Fujifilm, dengan film integral Instax untuk kamera Instax, dan Polaroid (sebelumnya The Impossible Project) untuk kamera Polaroid lama (600, SX-70, dan 8 × 10) dan kamera I-Type-nya.
Sumber : Wikipedia
DAFTAR ISI
Frame Foto Polaroid Style 1
Efek frame foto polaroid style 1 menggunakan tampilan old-school dengan sentuhan warna frame agak kekuningan sehingga menghasilkan efek yang terlihat memudar seolah-olah termakan oleh waktu. Style 1 ini benar-benar mengkondisikan aura vintage yang unik sehingga membuat gambar foto yang ditampilkan menjadi gambar foto yang bernuansa tempoe doeloe.
klik gambar untuk melihat koleksi foto
Buat sobat blogger yang tertarik menggunakan efek frame foto polaroid style 1 ini, silakan sobat blogger salin kode CSS di bawah ini terlebih dahulu. Kode CSS bisa ditaruh ke dalam kode template blog atau langsung digunakan di dalam artikel blog dalam mode edit HTML atau bisa juga ditaruh di kotak gadget.
Buat sobat blogger yang tertarik menggunakan efek frame foto polaroid style 1 ini, silakan sobat blogger salin kode CSS di bawah ini terlebih dahulu. Kode CSS bisa ditaruh ke dalam kode template blog atau langsung digunakan di dalam artikel blog dalam mode edit HTML atau bisa juga ditaruh di kotak gadget.
<style>
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');
figure, figcaption {
display: block;
}
.polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
.polaroid img{
max-width: 100%;
width: 100%;
height: auto;
}
.polaroid figure{
position:relative;
width: auto;
max-width: 600px; /* 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;
}
@media only screen and (min-width: 600px) {#polaroid figure{max-width: 600px; /* Lebar maksimal gambar */}}
.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 figcaption{
text-align:center;
font-family: 'Reenie Beanie', cursive;
font-size:20px;
color:#454f40;
letter-spacing:0.09em;
margin-top:10px;
}
</style>
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');
figure, figcaption {
display: block;
}
.polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
.polaroid img{
max-width: 100%;
width: 100%;
height: auto;
}
.polaroid figure{
position:relative;
width: auto;
max-width: 600px; /* 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;
}
@media only screen and (min-width: 600px) {#polaroid figure{max-width: 600px; /* Lebar maksimal gambar */}}
.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 figcaption{
text-align:center;
font-family: 'Reenie Beanie', cursive;
font-size:20px;
color:#454f40;
letter-spacing:0.09em;
margin-top:10px;
}
</style>
Cara menggunakannya cukup mudah silakan sobat gunakan format kode HTML di bawah ini.
Format dasar penggunaan frame foto polaroid :
<div class="polaroid">
<figure>
<img border="0" src="https://gambar-kamu.jpg" /></div>
<figcaption>nama caption gambar</figcaption>
</figure>
</div>
<figure>
<img border="0" src="https://gambar-kamu.jpg" /></div>
<figcaption>nama caption gambar</figcaption>
</figure>
</div>
Format dasar penggunaan frame foto polaroid menggunakan format embed gambar blogspot :
<div class="polaroid">
<figure>
<div class="separator" style="clear: both;"><a href="https://codeflare.blogspot.com/2021/05/monica-ardhea-photo-collection.html" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfV-H7Q90VGdILKaNIetejyHsAmacSwoMbMNlRgdyiHpBbV5Yu7cFcPZBvOk-ABwlZg8WvedOQRWdqzo_3UwE_bI96mP4C9d5I7_VDQ6ro7i7SC2K0yPnx14Q3jx9p16ce6SYCA7wuss4/s400/01.jpg" alt="Monica Ardhea" style="border:1px #ccc solid;border-radius:4px;"/></a></div>
<figcaption>Monica Ardhea</figcaption>
</figure>
</div>
<figure>
<div class="separator" style="clear: both;"><a href="https://codeflare.blogspot.com/2021/05/monica-ardhea-photo-collection.html" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfV-H7Q90VGdILKaNIetejyHsAmacSwoMbMNlRgdyiHpBbV5Yu7cFcPZBvOk-ABwlZg8WvedOQRWdqzo_3UwE_bI96mP4C9d5I7_VDQ6ro7i7SC2K0yPnx14Q3jx9p16ce6SYCA7wuss4/s400/01.jpg" alt="Monica Ardhea" style="border:1px #ccc solid;border-radius:4px;"/></a></div>
<figcaption>Monica Ardhea</figcaption>
</figure>
</div>
Format penggunaan frame foto polaroid untuk gambar lebih dari satu arah menyamping dan auto kebawah secara responsive :
<div class="polaroid">
<figure>
<div class="separator" style="clear: both;"><a href="URL gambar 01" target="blank"><img border="0" src="URL gambar 01" alt="" style="border:1px #ccc solid;border-radius:4px;"/></a></div>
<figcaption>Gambar 01</figcaption>
</figure>
<figure>
<div class="separator" style="clear: both;"><a href="URL gambar 02" target="blank"><img border="0" src="URL gambar 02" alt="" style="border:1px #ccc solid;border-radius:4px;"/></a></div>
<figcaption>Gambar 02</figcaption>
</figure>
</div>
<figure>
<div class="separator" style="clear: both;"><a href="URL gambar 01" target="blank"><img border="0" src="URL gambar 01" alt="" style="border:1px #ccc solid;border-radius:4px;"/></a></div>
<figcaption>Gambar 01</figcaption>
</figure>
<figure>
<div class="separator" style="clear: both;"><a href="URL gambar 02" target="blank"><img border="0" src="URL gambar 02" alt="" style="border:1px #ccc solid;border-radius:4px;"/></a></div>
<figcaption>Gambar 02</figcaption>
</figure>
</div>
Frame Foto Polaroid Style 2
Efek frame foto polaroid style 2 dengan tampilan yang kasual dan modern namun memiliki efek warna grayscale dan animasi zoom membuat yang efek frame foto menjadi lebih dinamis. Dimensi frame dan juga settingan lain pada kode CSS style 2 ini bisa di modifikasi lagi untuk disesuaikan dengan kebutuhan sobat blogger.
France
Italy
France
Italy
Buat sobat blogger yang tertarik menggunakan efek frame foto polaroid style 2 ini, silakan sobat blogger salin kode CSS di bawah ini terlebih dahulu. Kode CSS bisa ditaruh ke dalam kode template blog atau langsung digunakan di dalam artikel blog dalam mode edit HTML atau bisa juga ditaruh di kotak gadget.
<style>
.wrapper-photo {
width: 100%;
text-align: center;
}
.polaroid2 {
background: #fff;
padding: 1rem;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
}
.polaroid2 > img {
width: 100%;
max-width: 100%;
height: auto;
}
.caption2 {
font-size: 1.8rem;
text-align: center;
line-height: 2em;
}
.photo2 .polaroid2:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.40s;
}
.photo2{filter: grayscale(100%);margin: 25px;width: 60%;display: inline-block;transition: all 0.35s;}
.photo2:first-child{margin:0 25px 25px 0;}
.photo2:last-child{margin:25px 0 0 25px;}
.photo2:nth-of-type(2n+1) {transform: rotate(5deg);}
.photo2:nth-of-type(2n+2) {transform: rotate(-5deg);}
.photo2:nth-of-type(2n+1) .polaroid2:before {
transform: rotate(6deg);
height: 20%;
width: 47%;
bottom: 30px;
right: 12px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}
.photo2:nth-of-type(2n+2) .polaroid2:before {
transform: rotate(-6deg);
height: 20%;
width: 47%;
bottom: 30px;
left: 12px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}
.photo2:hover {
filter: none;
width: 100%;
margin: 0;
border: 1px solid #ccc;
box-sizing: border-box;
transform: rotate(0deg);
transition: all 0.40s;
}
.photo2:hover .polaroid2:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 60%;
width: 60%;
bottom: 0%;
right: 10%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
transition: all 0.35s;
}
</style>
.wrapper-photo {
width: 100%;
text-align: center;
}
.polaroid2 {
background: #fff;
padding: 1rem;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
}
.polaroid2 > img {
width: 100%;
max-width: 100%;
height: auto;
}
.caption2 {
font-size: 1.8rem;
text-align: center;
line-height: 2em;
}
.photo2 .polaroid2:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.40s;
}
.photo2{filter: grayscale(100%);margin: 25px;width: 60%;display: inline-block;transition: all 0.35s;}
.photo2:first-child{margin:0 25px 25px 0;}
.photo2:last-child{margin:25px 0 0 25px;}
.photo2:nth-of-type(2n+1) {transform: rotate(5deg);}
.photo2:nth-of-type(2n+2) {transform: rotate(-5deg);}
.photo2:nth-of-type(2n+1) .polaroid2:before {
transform: rotate(6deg);
height: 20%;
width: 47%;
bottom: 30px;
right: 12px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}
.photo2:nth-of-type(2n+2) .polaroid2:before {
transform: rotate(-6deg);
height: 20%;
width: 47%;
bottom: 30px;
left: 12px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4);
}
.photo2:hover {
filter: none;
width: 100%;
margin: 0;
border: 1px solid #ccc;
box-sizing: border-box;
transform: rotate(0deg);
transition: all 0.40s;
}
.photo2:hover .polaroid2:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 60%;
width: 60%;
bottom: 0%;
right: 10%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
transition: all 0.35s;
}
</style>
<div class="wrapper-photo">
<div class="photo2">
<div class="polaroid2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg">
<div class="caption2">France</div>
</div></div>
<div class="photo2">
<div class="polaroid2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_mbhKbZIHPX13V8KJ_4ZZ5mvF8PbK98lCpYKp1HtYOWrWHOH9QTL5fC1zhq7KccNjE0n-8vLlK4UJ6NGulLIAeP85RN8SPd099NIxqhJb9VYU3H2ISLBratbXcFrklsffPgI8Bp42Qw/s600/pisa+tower.jpg">
<div class="caption2">Italy</div>
</div></div>
<div class="photo2">
<div class="polaroid2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg">
<div class="caption2">France</div>
</div></div>
<div class="photo2">
<div class="polaroid2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_mbhKbZIHPX13V8KJ_4ZZ5mvF8PbK98lCpYKp1HtYOWrWHOH9QTL5fC1zhq7KccNjE0n-8vLlK4UJ6NGulLIAeP85RN8SPd099NIxqhJb9VYU3H2ISLBratbXcFrklsffPgI8Bp42Qw/s600/pisa+tower.jpg">
<div class="caption2">Italy</div>
</div></div>
</div>
<div class="photo2">
<div class="polaroid2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg">
<div class="caption2">France</div>
</div></div>
<div class="photo2">
<div class="polaroid2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_mbhKbZIHPX13V8KJ_4ZZ5mvF8PbK98lCpYKp1HtYOWrWHOH9QTL5fC1zhq7KccNjE0n-8vLlK4UJ6NGulLIAeP85RN8SPd099NIxqhJb9VYU3H2ISLBratbXcFrklsffPgI8Bp42Qw/s600/pisa+tower.jpg">
<div class="caption2">Italy</div>
</div></div>
<div class="photo2">
<div class="polaroid2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg">
<div class="caption2">France</div>
</div></div>
<div class="photo2">
<div class="polaroid2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_mbhKbZIHPX13V8KJ_4ZZ5mvF8PbK98lCpYKp1HtYOWrWHOH9QTL5fC1zhq7KccNjE0n-8vLlK4UJ6NGulLIAeP85RN8SPd099NIxqhJb9VYU3H2ISLBratbXcFrklsffPgI8Bp42Qw/s600/pisa+tower.jpg">
<div class="caption2">Italy</div>
</div></div>
</div>
Frame Foto Polaroid Style 3
Efek frame foto polaroid style 3 ini memiliki beberapa variasi dalam artikel ini admin hanya memberikan 3 variasi supaya tutorial tidak terlalu lama. Perbedaan dari variasi style 3 ini hanya penggunaan gambar background selebihnya menggunakan kode CSS yang sama. Berikut contoh penggunaan dari 3 variasi untuk efek frame foto polaroid style 3.
Frame Foto Polaroid Style 3A
France
France
France
Frame Foto Polaroid Style 3B
France
France
France
Frame Foto Polaroid Style 3C
France
France
France
Buat sobat blogger yang tertarik menggunakan efek frame foto polaroid style 3 ini, silakan sobat blogger salin kode CSS di bawah ini terlebih dahulu. Kode CSS bisa ditaruh ke dalam kode template blog atau langsung digunakan di dalam artikel blog dalam mode edit HTML atau bisa juga ditaruh di kotak gadget.
<style>
.gallery {
text-align: center;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.gallery .img-item-1,.gallery .img-item-2,.gallery .img-item-3{
margin: 20px 10px 5px;
position: relative;
width: 25%;
display: inline-block;
transition: all .3s ease-in-out;
background-repeat: no-repeat;
background-position: center center;
}
.gallery .img-item-1{
padding: 8px;
border: 1px solid #ccc;
filter: grayscale(100%);
background-size: 105% 105%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAaISYuBt4EZ35W6NNktoA9mQaRVYMhON7AFC-8qeDfCvsUnE88W1uGQju31hCO97jMl-GyUjAIpkwxYxplbvO71PeMIQglisdFClb9HJhn3Ew41Cmd2eEmoxTfq3aflH-OaGltQ1clmE/s0/polaroid.png); }
.gallery .img-item-2{
padding: 8px;
border: 1px solid #ccc;
background-size: 105% 105%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx3DVV-W4Vz-aMWdU1T6WruQOYNyMBWPZjdlOVyNAvUxs9j0fl8P_WAER_5pUzJTkXnLKBb74_63kK2YYlJiUGq0ZSr-wra4PgzrygVgo9_AMIMLsupq2e0ZhJ86zs2VCFeeouQzL8Sao/s0/watercolor-mask.png);}
.gallery .img-item-3{
padding: 15px;
background-size: 100% 100%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9j9neVMUFC3qE7a6-HnF18Fs20UzpWhdRiYse-QB25GPvvzzVw9c1Xer5Jo38_f96hiRSEa8cm2TbsDXZ_Chncotg9Tr1bgT4TbZy9ff3mV08wTaKzQgMQyrC1H1uDOZmuBVwCyfhyiI/s0/brush-border.png);}
@media only screen and (max-width: 600px) {
.gallery .img-item-1,.gallery .img-item-2,.gallery .img-item-3{width: 300px;}
}
.gallery .img-item-1:hover,.gallery .img-item-2:hover,.gallery .img-item-3:hover {
filter: none;
transform: scale(1.2);
}
.gallery .img-item-1:hover > a span,.gallery .img-item-2:hover > a span,.gallery .img-item-3:hover > a span {display:none;}
.gallery .img-item-1 span,.gallery .img-item-2 span, .gallery .img-item-3 span {
display: block;
position: absolute;
top: -12px;
left:0;
right:0;
margin:auto;
}
.gallery .img-item-1 span {width: 77px;height: 27px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQ27oZ9nSFGS-4Jl9jM8MnsLps65JoC2Q-lOqfsPprdXJLOx9cm1VIoR_n30gUrsidsFAJ0b4ksAuu5t1ETce7VqvAn9xK7cyoTtPC3yTJA8UAJZjgnDHAIsdqK6YYfHFNRlnkwDDWpU/s0/tape.png) no-repeat;}
.gallery .img-item-2 span {width: 77px;height: 27px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9cwxfdizTbaAJQOjP7ZKrrm9bmAd0zUg7a25WCxTh4mWId1i7AE2faSFpSdhrKJCrUsRgr6VeGq5TnNTsnltXTIUgOvn-764pTc8gckE-tDYD17T_-jL8semrHpl39r3qgbU_Baai2_g/s0/tape2.png) no-repeat;}
.gallery .img-item-3 span {width: 28px;height: 21px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGdCJBBco6gWtDMf4UV5a5O14lG71mXw58652dD0SP-rlwGFRDGuJvNfxqJSSk1SVMmz-aMl536hFKf2Rkj2To9UuL85r6_F_RGBEd2eZs5aSdyvMr4zE-L0-TW_VU7ctt1vuxbutgNY/s0/pin.png) no-repeat;}
.gallery em {
display: block;
padding: 0 20px 0 0;
text-align: center;
font: italic 100% Georgia, "Times New Roman", Times, serif;
color: #333;
}
</style>
.gallery {
text-align: center;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.gallery .img-item-1,.gallery .img-item-2,.gallery .img-item-3{
margin: 20px 10px 5px;
position: relative;
width: 25%;
display: inline-block;
transition: all .3s ease-in-out;
background-repeat: no-repeat;
background-position: center center;
}
.gallery .img-item-1{
padding: 8px;
border: 1px solid #ccc;
filter: grayscale(100%);
background-size: 105% 105%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAaISYuBt4EZ35W6NNktoA9mQaRVYMhON7AFC-8qeDfCvsUnE88W1uGQju31hCO97jMl-GyUjAIpkwxYxplbvO71PeMIQglisdFClb9HJhn3Ew41Cmd2eEmoxTfq3aflH-OaGltQ1clmE/s0/polaroid.png); }
.gallery .img-item-2{
padding: 8px;
border: 1px solid #ccc;
background-size: 105% 105%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx3DVV-W4Vz-aMWdU1T6WruQOYNyMBWPZjdlOVyNAvUxs9j0fl8P_WAER_5pUzJTkXnLKBb74_63kK2YYlJiUGq0ZSr-wra4PgzrygVgo9_AMIMLsupq2e0ZhJ86zs2VCFeeouQzL8Sao/s0/watercolor-mask.png);}
.gallery .img-item-3{
padding: 15px;
background-size: 100% 100%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9j9neVMUFC3qE7a6-HnF18Fs20UzpWhdRiYse-QB25GPvvzzVw9c1Xer5Jo38_f96hiRSEa8cm2TbsDXZ_Chncotg9Tr1bgT4TbZy9ff3mV08wTaKzQgMQyrC1H1uDOZmuBVwCyfhyiI/s0/brush-border.png);}
@media only screen and (max-width: 600px) {
.gallery .img-item-1,.gallery .img-item-2,.gallery .img-item-3{width: 300px;}
}
.gallery .img-item-1:hover,.gallery .img-item-2:hover,.gallery .img-item-3:hover {
filter: none;
transform: scale(1.2);
}
.gallery .img-item-1:hover > a span,.gallery .img-item-2:hover > a span,.gallery .img-item-3:hover > a span {display:none;}
.gallery .img-item-1 span,.gallery .img-item-2 span, .gallery .img-item-3 span {
display: block;
position: absolute;
top: -12px;
left:0;
right:0;
margin:auto;
}
.gallery .img-item-1 span {width: 77px;height: 27px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQ27oZ9nSFGS-4Jl9jM8MnsLps65JoC2Q-lOqfsPprdXJLOx9cm1VIoR_n30gUrsidsFAJ0b4ksAuu5t1ETce7VqvAn9xK7cyoTtPC3yTJA8UAJZjgnDHAIsdqK6YYfHFNRlnkwDDWpU/s0/tape.png) no-repeat;}
.gallery .img-item-2 span {width: 77px;height: 27px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9cwxfdizTbaAJQOjP7ZKrrm9bmAd0zUg7a25WCxTh4mWId1i7AE2faSFpSdhrKJCrUsRgr6VeGq5TnNTsnltXTIUgOvn-764pTc8gckE-tDYD17T_-jL8semrHpl39r3qgbU_Baai2_g/s0/tape2.png) no-repeat;}
.gallery .img-item-3 span {width: 28px;height: 21px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGdCJBBco6gWtDMf4UV5a5O14lG71mXw58652dD0SP-rlwGFRDGuJvNfxqJSSk1SVMmz-aMl536hFKf2Rkj2To9UuL85r6_F_RGBEd2eZs5aSdyvMr4zE-L0-TW_VU7ctt1vuxbutgNY/s0/pin.png) no-repeat;}
.gallery em {
display: block;
padding: 0 20px 0 0;
text-align: center;
font: italic 100% Georgia, "Times New Roman", Times, serif;
color: #333;
}
</style>
<div class="gallery">
<div class="img-item-1">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-1">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-1">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
</div>
<div class="gallery">
<div class="img-item-2">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-2">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-2">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
</div>
<div class="gallery">
<div class="img-item-3">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-3">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-3">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
</div>
<div class="img-item-1">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-1">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-1">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
</div>
<div class="gallery">
<div class="img-item-2">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-2">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-2">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
</div>
<div class="gallery">
<div class="img-item-3">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-3">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
<div class="img-item-3">
<a href="#">
<span></span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0ss2GsT6yA9QHVr2vsJwhpWoNIFucO_HWJW-KiH1-UVYLoiwOOem3hcaGek-ay7gLRCimkjN7eDS_VT7zzbKR3hzExDtTdLsCjiHfEjNtoOFqdtlKkDM6dxPg8JJqIlw-JCKMsFr-gw/s600/eiffel-tower.jpg" alt="image" /></a>
<em>France</em>
</div>
</div>
Demikian artikel blog tentang Cara Bikin Frame Foto Polaroid Menggunakan CSS terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.
Keyword
blog, blogger, blogspot, efek, foto, gambar, picture, pic, img, image, frame, bingkai, polaroid, film, kotak, box, border, background, latar, css, jquery, javascript, kode, code, html, artikel, post, unik, menarik
Incoming Search Term
cara membuat bingkai foto polaroid untuk gambar, memasang frame polaroid pada halaman website atau artikel blog, kode css untuk efek frame foto polaroid, html css polaroid frame, membuat gambar menjadi seperti polaroid, film kamera polaroid di blogspot, css kotak pic mirip polaroid, bikin foto jadul di blogger, pasang foto tempoe doloe untuk halaman blog, bikin foto retro dan vintage menggunakan border polaroid, pasang efek polaroid hitam putih menggunakan kode css
About CodeFlare
![[+] Codeflare Backlink Editor To Create Anchor Text With Keyword](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXC9KPkhkaNh3A4Wy-XX1I2kSj2rB2qXjmLIQktDvCxyPdUINtltp2Ih9iLVpEyb-0tYBaLGQb52bIszHmT9_etJT-awZy9IcxsBPfvQHJs7K7BI6bxz0rgcILCFxAhuL0CNbqYaS9DvELwWieNdZscUv-_8lhmqeMjcWmIRH3X38nOkbgkYK6dfySxg/s72-c/backlink%20editor.jpg)
No comments