Cara menambahkan Warna Gambar Latar Belakang Posting Gambar

Oleh Unknown

Jumat, 30 Oktober 2015

Bagikan :

Tweet

Menambahkan warna diatas gambar latar belakang blog atau postingan gambar. Hal ini kan membuat gambar lebih indah dan beberapa desainer blog mewrnai gambar dengan menggunakan warna yang berbeda. Ini semua berkat CSS hack. Kita bisa menambahkan 3 warna sekaligus.

Jadi dalam tutorial ini saya akan menunjukan 3 contoh warna gambar dengan mudah.

#Unsur warna untuk PSEUDO IMage.
Dengan menggunakan Pseudo Elements kita dapat dengan mudah mewarnai gambar . Misalnya tujuan saya mengatur lebar gambar 300px X313px dan menambahkan warna gelap diatas gambar dengan menggunakan unsur-unsur semu. Caranya Anda tinggal mengikuti langkah berikut ini

CSS

<style type="text/css">
.pseudo-elements {
position:relative;
width: 300px;
height: 313px;
background: url(IMAGE URL HERE);
}
.color:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.35);
}
</style>

HTML

<div class="pseudo-elements color"> </div> 

KETERANGAN
Ada dapat mengubah warna warna dengan background: RGBA (0,0,0,0.35); kode warna.
Ganti URL IMAGE HERE dengan link gambar Anda.

#Warna Gradient Untuk Tint Image
Tinting Image dengan menggunakan warna latar belakang Gradient benar-benar mengagumkan. Degan menggunakan warna ini kita dapat berbaur dua warna pada satu waktu gambar pun akan terlihat Indah.

CSS

<style type="text/css">
.gradient-color {
width: 300px;
height: 313px;
background:
linear-gradient(
rgba(255, 0, 92, 0.6),
rgba(0, 0, 0, 0.75)
),
url(IMAGE URL HERE);
}
</style

HTML

<div class="gradient-color"></div> 

KETERANGAN
1. Anda dapat mengubah warna warna pencampuran dengan mengubah RGBA (255, 0, 92, 0,6), dan RGBA (0, 0, 0, 0.75) kode warna.
2. Ganti URL IMAGE HERE dengan link gambar Anda.

#Box Shadow Tint Image
Dengan cara ini kita akan menambah warna seperti bayangan pada kotak gambar. Untuk melakukan ini cukup ikuti langkah-langkah dibawah.

CSS

<style type="text/css">
.box-shadow  {
position:relative;
width: 300px;
height: 313px;
box-shadow: 0px 313px rgba(4, 151, 248, 0.65) inset;
background: url(IMAGE URL HERE);
}
</style>

HTML 

<div class="box-shadow"></div>

KETERANGAN
1. Anda dapat mengubah warna warna pencampuran dengan mengubah RGBA (4, 151, 248, 0.65). kode warna.
2. Ganti URL IMAGE HERE dengan link gambar Anda.

Saya harap Anda dapat mewarnai gambar blog dengan mudah menggunakan CSS. Jika Anda kurang paham, silahkan dan jangan ragu untuk memberikan komentar dibawah ini. Wasalam. (http://contohblogspotnih.blogspot.co.id/)

Tag : Desain Blogspot