Membuat Gambar Vintage Hanya Dengan CSS Untuk Blogger

Tweet

Membuat Gambar Vintage Hanya Dengan CSS Sederhana - D-Copy Blog | Instagram telah membuat banyak mengambil rasa untuk foto vintage, sehingga sangat umum untuk melihat di mana-mana foto-foto yang memberikan tampilan untuk menjadi sesuatu yang lama.

Jika Anda tidak ingin menggunakan sebuah program untuk memiliki tipe foto vintage Anda, Anda dapat menggunakan CSS dan mendapatkan hasil yang serupa. Dalam dirinya sendiri bahwa kami akan menerapkan bayangan memudar ke dalam gambar, kita akan menambahkan tepi, dan juga kita akan menempatkan warna di atas (yang akan memberikan Anda bahwa efek seperti Instagram), dan di atas yang lain gaya gambar semitransparan citra grunge akan memberikan sentuhan tua.

Anda dapat melihat contoh dalam gambar di bawah, memindahkan kursor berubah menjadi normal, tetapi mempertahankan tepi.

Gambar Default Jika Tidak Disorot Mouse

Gambar Jika Disorot Mouse

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu template > edit HTML > Proceed
3. Cari kode dibawah ini :

]]></s:kin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

/* Imágenes Vintage
----------------------------------------------- */
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px solid #000;
position: relative;
float: left; /* Berubah dengan tepat jika Anda ingin gambar yang akan berpihak ke kanan */
margin-right: 20px;
margin-bottom: 20px;
}
.vintage:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,0,0, 0.5); /* Vintage MERAH */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglCVXkQViZz7S30K_RxP3gxzWSNKt63vShp-4_qrffwxw7HSytWH-SjwB7swFJ3PzAi2GQGVjjFzJffYduUbEc7k1b94XMXMbyVi3b_ou0ARi5IhSQSImZVCtq8DrvX3V72Onubgi5Pn8/s0/grunge.png);
background-size: cover;
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;
transition: all .1s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

    5.  Save template Anda
    6. Penerapan pada gambar postingan, pada menu HTML di area membuat postingan blog, klik HTML.

Maka Anda buat harus seperti dibawah ini :

<div class="vintage">
<img border="0" src="URL Gambar Postingan Anda" /></div>
<div style="clear: both;"/>

Catatan : Upload telebih dahulu gambar yang ingin Anda kasih efek vintage lalu sesuaikan penempatan HTML pada langkah diatas.

Jika Anda ingin efek vintage pada warna lain Anda bisa gunakan CSS dibawah ini dengan warna yang lain dan ubah pada background-color: rgba(255,0,0, 0.5); /* Vintage MERAH */ langkah 4 diatas.

background-color: rgba(0,0,255, 0.5); /* Vintage BIRU */
background-color: rgba(0,255,255, 0.5); /* Vintage aqua */
background-color: rgba(0,255,0, 0.5); /* Vintage Hijau */
background-color: rgba(255,0,240, 0.5); /* Vintage violeta */
background-color: rgba(255,102,0, 0.6); /* Vintage sepia */
background-color: rgba(0,0,0, 0.6); /* buruk warna oscuros */

Jika Anda ingin gambar tidak ingin kembali ke kondisi semula ketika disorot mouse kemudian hapus kode pertama seperti dibawah ini :

.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

Terima kasih, semoga bermanfaat.
Sumber artikel : http://ciudadblogger.com/2012/09/imagenes-estilo-vintage-en-el-blog-solo-con-CSS.html