Penggunaan Type Dan Jangkauan Gradients CSS3

06/09/2016    Ekky Ridyanto    1108     Website

Type pada radial gradients ada dua yaitu bisa kita berikan ellipse dan bisa kita berikan circle secara default jika teman teman tidak menuliskan typenya maka otomatis bentuknya ellipse misalnya saya menuliskan typenya circle maka akan berbentuk lingkaran sempurna walaupun gradiasinya terpotong tapi intinya titik pusatnya akan berada ditengah. Berikut ini kode yang saya tulis

Dengan menuliskan kode diatas maka akan menciptakan gradiasi warna seperti berikut

lalu yang kedua yaitu jangkauan. Jangkauan ini adalah jarak dari pusat gradiasi ke sisi terluarnya. Ini ada beberapa jangkauan yang teman teman bisa berikan dan masing-masing itu teman teman harus dipahami perilakunya seperti apa. Jadi ada 4 nilai yang teman teman bisa berikan yaitu

1. closest-corner yaitu sudut terdekat artinya jarak dari pusat gradiasi ke sudut terdekat dari elemennya.
2. closest-side artinya jarak dari pusat gradiasi ke sisi terdekat dari elemennya.
3. farthest-corner artinya jarak dari pusat gradiasi ke sudut terjauh dari elemennya.
4. farthest-side artinya jarak dari pusat gradiasi ke sisi terjauh dari elemennya.

Nah itu semua akan menentukan besar kecilnya radius dari gradiasinya. Corner itu sudut dari elemennya sedangkan side adalah sisi yang menentukan sudut atau sisi terdekat sebagai closest dan farthest adalah terjauh. Misalnya saya berikan type circle dan jangkauannya kita gunakan closest-side. Pusatnya Burlywood dan terluarnya Lavender

Titik pusat ditengah warnanya Burlywood dan typenya circle atau lingkaran. Untuk jangkauannya closest-side atau sisi terdekatnya maka gradiasinya berakhir di sisi terdekat. Itu dia penggunaan dari type dan jangkauan yang kita bisa berikan pada radial-gradients. Terima kasih.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More