Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menciptakan Bingkai Foto Polaroid Dengan Css

Bingkai Foto dan Gambar Polaroid dengan CSS Cara Membuat Bingkai Foto Polaroid dengan CSS

Keberadaan gambar atau foto dalam sebuah blog menjadi hal yang tidak mampu ditinggalkan. Selain untuk menjadi aspek perhiasan yang membuat pembagian terstruktur mengenai dalam artikel menjadi lebih jelas. Saya ambil teladan blog dengan tema bimbingan, pengunjung lebih mudah mengikuti petunjuk dengan mengikuti alur yang ditampilkan dalam gambar.

Anda mampu lihat blog niche fotography, telah diputuskan akan mengandung banyak gambar sebab artikelnya ditulis menurut pengalaman eksklusif dengan foto selaku dokumentasi aksesori.

Untuk bimbingan kali ini bermaksud untuk menambahkan imbas polaroid pada foto. Hasilnya bagus banget seperti ada kesan vintage dan retro-nya. Script pun super ringan karena cuma terdiri dari CSS dan HTML saja. Ini support juga untuk template AMP kok.


Membuat Efek Foto Polaroid Vintage dari CSS

Langkah Pertama: Tambahkan instruksi CSS ini diatas atau ]]>.

/* Polaroid Frame on Images by masmalven.com */ 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 optimal 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 figcaption text-align:center; font-family: 'Reenie Beanie', cursive; font-size:1.75em; color:#454f40; letter-spacing:0.09em; margin-top:10px; 

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

Kemudian saat menambahkan gambar, kau wajib memakai HTML dengan format mirip ini.

URL GAMBAR DISINI" alt="Bingkai Foto dan Gambar Polaroid dengan CSS Cara Membuat Bingkai Foto Polaroid dengan CSS" title="Cara Membuat Bingkai Foto Polaroid dengan CSS"/>
Caption Gambar

Hasil bingkai polaroid mirip di bawah ini.

Bingkai Foto dan Gambar Polaroid dengan CSS Cara Membuat Bingkai Foto Polaroid dengan CSS

Jika kau ingin membuat gambarnya sejajar kesamping, maka tuliskan tag HTML
berulang (masih di dalam lingkup tag HTML
). Contohnya seperti ini di bawah ini.

URL GAMBAR SATU" alt="Bingkai Foto dan Gambar Polaroid dengan CSS Cara Membuat Bingkai Foto Polaroid dengan CSS" title="Cara Membuat Bingkai Foto Polaroid dengan CSS"/>
Caption Gambar Satu
URL GAMBAR DUA" alt="Bingkai Foto dan Gambar Polaroid dengan CSS Cara Membuat Bingkai Foto Polaroid dengan CSS" title="Cara Membuat Bingkai Foto Polaroid dengan CSS"/>
Caption Gambar Dua
URL GAMBAR TIGA" alt="Bingkai Foto dan Gambar Polaroid dengan CSS Cara Membuat Bingkai Foto Polaroid dengan CSS" title="Cara Membuat Bingkai Foto Polaroid dengan CSS"/>
Caption Gambar Tiga

Maka akan menghasilkan bingkai polaroid yang saling berdampingan. Jika kau ingin membuka dari perangkat seluler maka otomatis akan berbaris ke bawah (responsive). Di bawah ini cuma teladan ya..

Bingkai Foto dan Gambar Polaroid dengan CSS Cara Membuat Bingkai Foto Polaroid dengan CSS

Tambahan

Untuk hasil yang lebih manis, kamu bisa menambahkan Google Font untuk menciptakan jenis text di caption foto. Kamu tambahkan CSS ini diatas atau ]]>.

@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');

Kemudian 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 bila dirasa ukuran font terlalu kecil */ .... 

Untuk jenis font pada caption akan seperti di bawah ini. Kamu bisa lihat risikonya di CODEPEN aku.

Bingkai Foto dan Gambar Polaroid dengan CSS Cara Membuat Bingkai Foto Polaroid dengan CSS

Demikian tutorial CSS kali ini. Semoga berguna dan terima kasih atas kunjungan Anda.