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
Ada sanggup mengubah warna warna dengan background: RGBA (0,0,0,0.35); isyarat warna.
Ganti URL IMAGE HERE dengan link gambar Anda.
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">HTML
.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>
<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.
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.
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/
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">HTML
.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
<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">HTML
.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>
<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/
CSS
<style type="text/css">HTML
.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>
<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
- Cara Memperbaiki Kesalahan Xml Parsing Di Template Cara Memperbaiki Kesalahan XML Parsing di Template Blogger .Seorang Blogger niscaya pernah mengalami kesalahan parsing dalam template Blogger ...
- Menampilkan Rating Bintang Dipencarian GoogleAnda pernah melihat Rating Bintang warna ke kuning-kuningan yang muncul ketika kita memasukan kata kunci di google? Hasil Googling dengan kita mencip ...
- Membuat Ikon Media Umum Sederhana Di BlogspotSetiap link Daftar Widget dengan $ type=social_icons dan dalam judul akan menjadi daftar ikon sosial kalau template Anda terintegrasi Blogger sosial ...
- Menghilangkan Navbar Di Blogger Dengan MudahMenghilangkan Navbar di Blogger dengan Mudah, disini aku memiliki beberapa cara untuk menghilangkan atau menyeembuyikan dari halama atau dengan cara ...
- Menambahkan Musik Player Html 5 Dengan Playlist Di Blog Cara Menambahkan Musik Player HTML 5 dengan Playlist di Blog, aku akan menjelaskan bagaimana menciptakan flash MP3 palyer di Blog Blogger Anda. ...
- Cara Menambahkan/Embeda Comment Box Dibawah Posts Blogger Cara Menambahkan/Embeda Comment Box Dibawah Posts Blogger Membuat kotak komentar dibawah posting blogger yakni trik yang sangat cantik kenapa ? seb ...
