Cara Tambah Gaya Vintage Ke Foto Di Blogger Menggunakan CSS

Untuk mendapatkan efek Instagram antik untuk gambar Anda, Anda tidak perlu menggunakan sebuah program, sekarang Anda dapat menggunakan CSS dan mendapatkan hasil yang serupa! Kami akan menerapkan bayangan di dalam gambar, menambahkan border, kita akan menempatkan warna di dalamnya, dan di atas gambar kami, kami akan menambahkan gambar semitransparan lain dengan gaya grunge yang akan memberikan sentuhan vintage. 

Anda dapat melihat contoh dalam gambar di bawah ini, bergerak perubahan kursor normal namun tetap tepi. 

Jelas akan ada gambar yang akan lebih cocok efek ini daripada yang lain, tapi terlepas dari yang kita lakukan, harus ada membuat beberapa pengamatan:

1. Hal ini dibuat dengan gaya CSS sehingga beberapa dari Anda mungkin sudah tahu, itu tidak akan mengenali browser, khususnya Internet Explorer, sehingga menggunakan browser IE tidak menunjukkan efek apapun.
2. Melayang sekitar gambar akan berubah dengan efek transisi, tetapi hanya di Firefox.
3. Foto-foto tersebut tidak terpusat, Anda harus menyelaraskan ke kiri (default), atau kanan.

Setelah diklarifikasi di atas, mari kita mulai menambahkan kode CSS pada template kita.

Menambahkan Effect Vintage ke Blogger Images

Langkah 1. Pergi ke Template> Edit HTML

Langkah 2. Pilih "Expand widget template" kotak

. Langkah 3 Cari potongan kode berikut:

 ]]> </ B: skin>

. Langkah 4 Tepat di atas itu, tambahkan kode CSS berikut:

 / * Vintage Images
----------------------------------------------- * /
. Img antik {
padding: 0;
float: left;
}
. Antik {
border: 10px solid # 000;
position: relative;
float: left; / * Perubahan ke kanan jika Anda ingin gambar yang akan selaras ke kanan * /
margin-right: 20px;
margin-bottom: 20px;
}
. Antik: sebelum {
isi: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
kiri: 0;
kanan: 0;
background-color: RGBA (255,102,0, 0,6); / * sepia * /

background-size: menutupi;
box-shadow: inset 0 0 50px # 000, inset 0 0 50px # 000, inset 0 0 50px # 000;
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
Transisi: semua .1 s;
}
. Antik: melayang-layang: sebelum {
background: none;
box-shadow: none;
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
Transisi: semua .1 s;
}

Catatan: Dalam kode pertama, Anda lihat dalam huruf tebal garis yang sesuai dengan warna gambar, Anda dapat mengubahnya dengan warna lain, ini adalah beberapa contoh vintage tradisional:

 background-color: RGBA (0,0,255, 0,5); / * biru * /
background-color: RGBA (0,255,0, 0,5); / * hijau * /
background-color: RGBA (0255255, 0,5); / * cyan * /
background-color: RGBA (255,0,0, 0,5); / * red * /
background-color: RGBA (255,0,240, 0,5); / * violet * /

Jika Anda ingin gambar untuk tidak mengubah ke kondisi semula pada mouse hover, kemudian hapus kodeterakhir:

 . Antik: melayang-layang: sebelum {
background: none;
box-shadow: none;
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
Transisi: semua .1 s;
}

Langkah 5. Setelah Anda membuat perubahan, klik Simpan Template

Langkah 6. Terakhir, tambahkan kode ini di dalam posting Anda setiap kali Anda ingin menerapkan efek vintage gambar (beralih ke tab HTML jika Anda ingin menggunakan kode ini dalam posting Anda)

 <div class="vintage">
<img border="0" URL src=" gambar "/> </ div>
<div style="font-family: both;"/>

Dan menambahkan URL gambar ke mana teks dengan warna biru.

Dan itu saja, dengan percobaan kecil ini Anda dapat memiliki gambar gaya vintage Anda menggunakan CSS saja.Nikmati!