Penggunaan Radial Gradients Pada CSS3

03/09/2016    Ekky Ridyanto    2053    Website

Hai semuanya masih diseri CSS3 kali ini kita akan belajar Radial Gradients sebelumnya kita sudah belajar mengenai teknik linear gradients yaitu membuat gradiasi warna yang lurus sedangkan untuk radial gradients yaitu membuat gradiasi warna secara melingkar. Disini kita akan mencoba menerapkannya bagaimana perilaku dari radial gradients. Untuk sintak dasarnya ini sama persis dengan linear gradients. Bukan property CSS3 melainkan value untuk background image dan minimal kita masukkan dua warna yaitu warna awal dan warna akhir

warna awal sebagai warna Burlywood ini akan menjadi pusat lingkarannya yang lingkarannya secara default bentuknya ellipse dan dia akan bergradiasi ke warna akhir sebagai warna Lavender.

Jadi itu dia simple saja. Lalu sama seperti linear gradients kita juga bisa menambahkan warna yang lebih dari dua, warna awal warna akhir dan ditengah-tengahnya adalah warna transisinya

jadi teman teman bisa tambahkan lagi warnanya sesuai keinginannya. Warna yang kita berikan akan menyesuaikan ukurannya artinya ukurannya akan seimbang. Tapi jika teman teman ingin membuat satu warna lebih banyak dari pada warna yang lain nah itu kita gunakan color stop sama seperti linear gradients

tinggal kita tambahkan besarnya mau berapa untuk warna tertentu. Teman teman boleh berikan persen atau pixel. 10 % dari total ukurannya. Jadi hal-hal tersebut mirip seperti linear gradients. Semoga jelas untuk artikel kali dan terima kasih.

No data.