Pada Kesempatan Kali ini saya Akan Melanjutkan Pembuatan Background Keren Tanpa Gambar Yang Kemarin Sudah Saya Jelaskan Dan Sekarang Saya Akan Membuatnya Berfungsi Atau Support Di Semua Browser.
Berikut Contoh Beserta Kode CSS Yang Dipakai Untuk Semua Browser.
Berikut Contoh Beserta Kode CSS Yang Dipakai Untuk Semua Browser.
- Background Gradient Dari Kiri
Kode/CSS Gradient:
background: -moz-linear-gradient(left, #0dc3ff, #FFF); background: -webkit-gradient(linear, left center, right center, from(#0dc3ff), to(#FFF));
Hasilnya:
- Background Gradient Dari kanan
Kode/CSS Gradient:
background: -moz-linear-gradient(right, #0dc3ff, #FFF); background: -webkit-gradient(linear, right center, left center, from(#0dc3ff), to(#fff));
Hasilnya:
- Background Gradient Dari Bawah
Kode/CSS Gradient:
background: -moz-linear-gradient(top, #0dc3ff, #FFF); background: -webkit-gradient(linear, center top, center bottom, from(#0dc3ff), to(#FFF));
Hasilnya:
- Background Gradient Dari Atas
Kode/CSS Gradient:
background: -moz-linear-gradient(bottom, #0dc3ff, #FFF); background: -webkit-gradient(linear, center bottom, center top, from(#0dc3ff), to(#FFF));
Hasilnya:
- Background Gradient Pelangi
Kode/CSS Gradient:
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));
Hasilnya:
- Keterangan: Dari Kode Dan Contoh Diatas Mungkin Sobat Blogger Bisa Memahaminya Dan Menkreasikannya Sendiri Dan Untuk Kode Yang Berwarna Merah Adalah Kode Yang Support Untuk Mozila Firefox Dan Untuk Kode Yang Berwarna Biru Adalah Kode Yang Support Untuk Google Chrome Dan Safari, Sebaiknya Dalam Pembentukan CSS Gradient Sobat Terapakan Saja Semua Kode Agar Support Untuk Semua Browser Dan Jangan Lupa Disetiap Kode Harus Ada Pointnya Dan untuk Memperjelas Keterangan Diatas Saya Berikan Rumus Berikut.
- Firefox Linear gradients
- Google Chrome Dan Safari Linear gradients
-moz-linear-gradient(<point> || <angle>, color-stops)
-webkit-gradient(linear, <point>, color-stops)
No comments:
Post a Comment