Cara Menambahkan Warna Gambar Latar Belakang Posting Gambar

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

Makara dalam tutorial ini aku akan menerangkan 3 referensi warna gambar dengan mudah.

#Unsur warna untuk PSEUDO IMage.
Dengan memakai Pseudo Elements kita sanggup dengan gampang mewarnai gambar . Misalnya tujuan aku mengatur lebar gambar 300px X313px dan menambahkan warna gelap diatas gambar dengan memakai 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 sanggup mengubah warna warna dengan background: RGBA (0,0,0,0.35); isyarat 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 memakai warna ini kita sanggup 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 sanggup mengubah warna warna pencampuran dengan mengubah RGBA (255, 0, 92, 0,6), dan RGBA (0, 0, 0, 0.75) isyarat warna.
2. Ganti URL IMAGE HERE dengan link gambar Anda.

#Box Shadow Tint Image
Dengan cara ini kita akan menambah warna menyerupai bayangan pada kotak gambar. Untuk melaksanakan 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 sanggup mengubah warna warna pencampuran dengan mengubah RGBA (4, 151, 248, 0.65). isyarat warna.
2. Ganti URL IMAGE HERE dengan link gambar Anda.

Saya harap Anda sanggup mewarnai gambar blog dengan gampang memakai CSS. Jika Anda kurang paham, silahkan dan jangan ragu untuk menawarkan komentar dibawah ini. Wasalam. (http://contohblogspotnih.blogspot.co.id/)

Sumber http://contohblogspotnih.blogspot.com/

Related Posts