Halo teman-teman pada kesempatan kali ini saya akan menjelaskan tentang Kegunaan Property repeating-radial-gradient() Pada CSS. Property repeating-radial-gradient() pada CSS, berguna untuk membuat pengulangan <gradient>, ada juga radial-gradient() namun perbedaannya, yaitu

Property radial-gradient() warna tersebar di sepanjang ray gradient sehingga gradient secara otomatis menyebar untuk mengisi seluruh kotak gradient, misalnya, daerah lukisan latar belakang dari elemen jika digunakan sebagai gambar latar belakang pada sebuah elemen repeating-radial-gradient (), di sisi lain, secara otomatis mengulangi warna berhenti jauh di kedua arah dengan posisi mereka digeser oleh kelipatan perbedaan antara posisi terakhir dan posisi pertama.

Kita akan mulai dengan gradient sederhana yang dibuat menggunakan radial-gradient (), dan kemudian mengubahnya menjadi repeating-radial-gradient (). Gambar berikut menunjukkan hasil dari penerapan radial-gradient (lingkaran, kuning, # 009966, ungu):

1

Jika kita mengganti fungsi radial-gradient() dengan fungsi repeating-radial-gradient() dalam contoh di atas, kita masih akan mendapatkan hasil yang sama. Itu karena fungsi tidak memiliki berhenti warna yang ditentukan, sehingga browser hanya akan berlaku 0% untuk warna pertama, 100% untuk ketiga, dan 50% untuk warna kedua, yang merupakan setengah jalan melalui pertama dan ketiga.

Contoh:

Dan hasilnya akan menjadi seperti ini:

2

Hasil diatas identik sama dengan contoh yang pertama, tetapi bukannya memiliki tiga warna yang tersebar di sepanjang ray gradient dari 0% sampai 100%, saya menyebarkan mereka dari 10px ke 50px, yang merupakan awal yang ditetapkan dan berakhir berhenti, sehingga terlihat seperti “besar” gradient dari sebelumnya telah menjadi cincin” di gradient berulang. Dan masing-masing “cincin” sedang berulang sepanjang ray gradient.

Dalam fungsi radial-gradient (), warna yang terakhir berhenti mendefinisikan mana warna terakhir dimulai, dan kemudian meluas warna yang sampai ke titik 100% dari sinar gradient. Jadi, dengan menggunakan warna yang sama berhenti dengan fungsi radial-gradient (), kita akan mendapatkan ini:
3

Dalam radial-gradient () fungsi, yang terakhir warna berhenti mendefinisikan mana warna terakhir dimulai, dan kemudian meluas warna yang semua jalan sampai akhir.

Jadi, warna ungu dimulai pada 50px dalam contoh ini, dan diperluas sampai ke titik 100% dari sinar gradient. Semoga bermanfaat

WhatsApp chat