Kamis, 08 Juni 2017

Cara Membuat Radial Gradient Pada css

   Assalamualaikum wr. wb Hallo selamat pagi sahabat lupacode semuanya dimanapun kalian sekarang sedang berada, berjumpa lagi bersama saya dengan admin dari blog lupacode ini, pada kesempatan kemarin saya telah membahas materi mengenai Linear Gradient kepada sahabat web desain semuanya, nah pada kesempatan kali ini saya juga ingin berbagi materi baru kepada sahabat web desain semuanya yang masih dalam seri css3 pada web desain ini.
   Bagi sahabat web desain yang ketinggalan update materi saya yang kemarin, sahabat semua dapat langsung mengunjungi halaman Sitemap atau daftar isi pada blog ini untuk melihat semua materi yang telah kita bahas sebelumnya, jadi jangan sampai ketinggalan untuk update materi – materi terbaru dari web desain yah

Cara Membuat Radial Gradients Pada CSS3

Cara membuat radial gradients Pada css3
Kali ini kita akan belajar radial gradients pada pembahasan sebelumnya kita telah membahas tentang linear gradients yaitu membuat gradasi warna yang lurus. Pada radial gradients ini kita akan membuat garis yang melingkar. sebelumnya telah banyak konsep mengenai radial gradients ini yang mirip dengan linear gradients jadi harapan saya kalian hharus paham dulu mengenai linear gradients . bagi yang belunm mempelajari materinya silahkan kalian lihat dulu pembahasan materi pada artikel sebelumnya supaya nanti kalian akan memudahkan dalam mempelajari materi ini
Untuk penerapan radial gradients ini  sebelumnya belum banyak website website yang menggunakan radial gradients  dan ini tidak sepopuler linear gradients tapi gak apa apa kita pelajari perilaku dari radial gradients ini  dan mudah mudahan nanti kalian punya ide untuk menerapkan radial gradients ini dengan baik. 
Langsung saja kita lihat bagaimana cara penulisannya jadi sintak sederhananya sama percis seperti linear gradients jadi ini bukanlah properti dari css3 melainkan ini adalah value dari background-image dan sintak sederhananya adalah seperti ini
Sintaks Radial Gradients Pada CSS3
 Sekarang kita lihat contohnya  adalah seperti ini

Radial Gradients Pada CSS3 - web desain
Contohnya kita tulis radial gradients lalu kita tulis red, blue maka akan menghasilkan gradasi melingkar seperti gambar di atas yang lingkran nya berbentuk elips dimana titik pusat lingkaran nya berwarna merah sebagai nilai pertama nya lalu dia akan bergradasi ke warna biru untuk warna akhirnya. Simpel saja untuk cara pembuatan nya kita tinggal tulis radial gradients kemudian warna awal lalu warna akhir
Sama hal nya dengan linear gradients kita bisa memberikan multiple color atau warna yang lebih dari dua contohnya seperti ini
Sekarang kita lihat contohnya seperti ini
Multiple color Radial Gradients Pada CSS3 - web desain
Contohnya misalkan saya kasih red green dan blue maka kita bisa lihat red adalah warna pusat lingkarannya dan green pusat antaranya dan blue sebagai warna akhirnya jadi silahkan kalian bisa tambahkan warna warna sesuai dengan keinginan kalian masing masing 
Warna yang diberikan akan menyesuaikan ukuran nya secara otomatis, tapi jika kalian ingin  memberikan satu warna lebih banyak dari warna yang lain maka kita gunakan color stop sama seperti linear gradients juga seperti ini

Cara membuat Color Stop Radial Gradients Pada CSS3 - web desain

Kita tinggal tambahkan besarnya berapa untuk warna tertentu, kalian bisa kasih persen atau kalian bisa kasih ukuran pixel sama saja. misalkan seperti contoh diatas kita kasih red 10% maka dia akan berwarna merah solid sebesar 10% dari total  ukurannya kemudian setelah 10% dia akan mulai bergradasi kemudian green 20% maka dia akan berwarna hijaunya 20% kemudian dia akan mulai bergradasi jadi seperti itu untuk color stop
Selanjutnya kita lihat sintaks lengkap dari radial gradients dan ini perbedaan antara linear gradients dan radial gradients
Sintaks lengkap Radial Gradients Pada CSS3 - web desain

Kita lihat yang pertama radial gradients itu punya <tipe> dan tipenya nanti ada dua  yaitu ellips dan circle kemudian kita bisa kasih <jangkauan > lalu apakah yang dimaksud dengan jangkauan ? jadi ini adalah jangkauan dari gradasi warna nya lalu kita bisa juga tentukan gradasi dari pusat warna nya
Kita bisa lihat yang pertama dulu ada tipe dan tipenya adadua yaitu ellips dan circle

Tipe Radial Gradients Pada CSS3 - web desain

Kemudian yang kedua itu ada jangkauan. Jangkauan adalah jarak dari pusat gradients ke sisi terluarnya kita lihat contohnya sebagai berikut

Jangkauan Radial Gradients Pada CSS3 - web desain

Sekarang kita lihat implementasi codingnya adalah sebagai berikut

Jangkauan Radial Gradients Pada CSS3 - web desain
Sekarang kalau saya rubah jadi farthest-corner maka hasilnya akan seperti ini

Circle Radial Gradients Pada CSS3 - web desain
Sekarang untuk value berikutnya yaitu posisi dan fungsinya untuk memindahkan pusat gradients. Posisinya ada dua value yang bisa kalian kasih yaitu posisi-y dan posisi-x
Posisi Radial Gradients Pada CSS3 - web desain
Contohnya adalah kalau misalkan kita kasih circle farthest-side at top left, red, blue maka titik pusatnya akan berada di kiri atas seperti ini

Posisi Radial Gradients Pada CSS3 - web desain

Jadi silahkan kalian berexperimen sendiri sendiri dengan value dari radial gradients ini
Baiklah mungkin itu saja untuk pembahasan marteri radial gradient kali ini, sampai berjumpa kembali didalam pembahasan saya selanjutnya mengenai materi – materi terbaru dari blog lupacode yang akan selalu update untuk sahabat lupacode semuanya. Saya admin dari blog lupacode undur diri  terimakasih atas kunjungannya...

Admin Lupacode
Wassalamualaikum Wr, Wb

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon