Background gradient fungsinya untuk menciptakan background warna dengan memakai 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Makara misalkan kita ingin memakai warna putih dan biru dibackground blog kita. Maka kita sanggup mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya menyerupai dibawah ini.
Background 1 warna dengan memakai warna biru.
Warna Biru Saja
Background 2 warna dengan memakai warna biru dan putih.
Warna Biru dan Putih
Selanjutnya yaitu cara menciptakan dan menerapkannya diblog. Sebagai percobaan kau sanggup coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan isyarat background posting berikut kedalamnya.
.post{
background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}
background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}
Lalu lihat perubahan background halaman posting, warna putih akan berada diatas dan biru ada dibagian bawah.
Berikut jenis2 pengaturan warna gradient 2warna yang sanggup kita gunakan.
Atas - Bawah
background: -moz-linear-gradient(top , #ffffff, #1780dd);
Kiri - Kanan
background: -moz-linear-gradient(left , #ffffff, #1780dd);
Warna Berhenti putih-biru-putih-biru-putih
background: -moz-linear-gradient(left , #ffffff, #1780dd, #ffffff, #1780dd, #ffffff);
Warna Berhenti putih-biru-putih-biru-putih dengan persen%
background: -moz-linear-gradient(left , #ffffff, #1780dd 5%, #ffffff, #1780dd 95%, #ffffff);
Warna putih dikiri-kanan dan biru ditengah
background: -moz-radial-gradient(circle, #1780dd, #ffffff);
Posisi dan Ukuran
background: -moz-radial-gradient(80% 20%, closest-corner, #1780dd, #ffffff);
Posisi: closest-corner pada penggalan atas sanggup diganti dengan isyarat
closest-side
closest-corner
farthest-side
farthest-corner
contain
cover
closest-corner
farthest-side
farthest-corner
contain
cover
Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda semoga terlihat lebih menarik. Untuk cara penggunaan dibagian lain, menyerupai pada penggalan header, sidebar atau keseluruh body halaman blog, kau sanggup baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada isyarat dari bagian2 blog, yang sanggup kau gunakan untuk diberi background 2 warna menyerupai pola diatas.
Catatan: Gradient 2 warna ini tidak sanggup dilihat di browser google chrome, sebabnya aku belum tau, kalau sudah tau aku akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga sanggup bermanfaat untuk anda.
Catatan: Gradient 2 warna ini tidak sanggup dilihat di browser google chrome, sebabnya aku belum tau, kalau sudah tau aku akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga sanggup bermanfaat untuk anda.
0 comments:
Post a Comment