Salah satu kelebihan CSS3 adalah kita bisa membuat warna gradasi (gradient) hanya dengan menggunakan kode CSS. Warna gradient ini biasa digunakan untuk latar belakangn ( background ) website.
Selain itu, warna gradient juga biasa digunakan untuk background menu dan title di sidebar. Seperti pada blog ini, menggunakan gradient pada background menu dan title widget di sidebar.
Sayangnya penulisan kode css untuk membuat gradient ini berbeda untuk masing-masing browser. Jika warna gradient yang Anda buat bisa ditampilkan untuk browser Mozilla Firefox belum tentu bisa untuk browser-browser yang lainnya. tetapi itu tidaklah masalah, pada postingan ini Saya akan memberikan kode membuat background gradient dengan css untuk semua browse. Untuk membuat warna gradasi seperti gambar diatas, kita membutuhkan warna dengan kode #FFFFFF ( Putih ) dan #131B8A (Biru), sehingga kode pada CSS adalah seperti dibawah ini :
Selain itu, warna gradient juga biasa digunakan untuk background menu dan title di sidebar. Seperti pada blog ini, menggunakan gradient pada background menu dan title widget di sidebar.
Sayangnya penulisan kode css untuk membuat gradient ini berbeda untuk masing-masing browser. Jika warna gradient yang Anda buat bisa ditampilkan untuk browser Mozilla Firefox belum tentu bisa untuk browser-browser yang lainnya. tetapi itu tidaklah masalah, pada postingan ini Saya akan memberikan kode membuat background gradient dengan css untuk semua browse. Untuk membuat warna gradasi seperti gambar diatas, kita membutuhkan warna dengan kode #FFFFFF ( Putih ) dan #131B8A (Biru), sehingga kode pada CSS adalah seperti dibawah ini :
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #131B8A));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #131B8A 100%);
Comments
Post a Comment