Halo teman-teman pada kesempatan kali ini saya akan menjelaskan tentang Cara Menggunakan Property repeating-linear-gradient(), pada artikel sebelumnya saya sudah membahas Cara Menggunakan Property repeating-radial-gradient Pada CSS. Maka sekarang kita akan membahas property repeating-linear-gradient().Property repeating-linear-gradient() berfungsi untuk membuat pengulangan <gradient>. Gradient yang terdiri dari dua atau lebih warna yang akan membuat gambar menjadi lebih smoothly. Property repeating-linear-gradient memiliki fungsi yang sama dengan linear-gradient.

Namun ada satu perbedaan utama antara repeating-linear-gradient dengan linear-gradient. Property linear-gradient pemberhentian warna tersebar disepanjang garis gradient sehingga gradient secara otomatis menyebar untuk mengisi seluruh kotak gradient. Sedangkan property repeating-linear-gradient() di sisi lain, secara otomatis mengulangi warna berhenti jauh di kedua arah dengan posisi mereka digeser oleh kelipatan perbedaan antara posisi terakhir ditentukan warna-stop dan posisi pertama ditentukan warna-stop ini.

Kita akan mulai dengan gradient sederhana yang dibuat menggunakan linear-gradient (), dan kemudian mengubahnya menjadi menggunakan property repeating-linear-gradient(). Gambar dibawah akan menunjukkan hasil dari penerapan linear-gradient() (ke kanan, kuning, # 009966, ungu); ke elemen:

1

 

Jika kita mengganti fungsi linear-gradient() menjadi repeating-linear-gradient() dalam contoh diatas. Kita masih akan mendapatkan hasil yang sama, karena fungsi tidak memiliki pemberhentian 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.
Menggunakan property repeating-linear-gradient() dengan warna yang sama seperti diatas akan menjadi seperti ini:

2

Contoh & Penjelasan penulisan script:

Penjelasan:

  • <angle> : nilai yang menentukan arah gradient. 0deg menunjuk ke atas, dan sudut positif mewakili rotasi searah jarum jam, sehingga 90deg poin ke kanan.
  • <side-or-corner> : Argumen ini dapat menentukan baik sisi atau sudut yang digunakan untuk menentukan sudut gradient. nilai-nilai sisi yang mungkin adalah: atas, kanan, bawah, dan kiri. Jika sisi yang ditentukan, itu didahului oleh kata kunci untuk. Misalnya, ke atas, yang memutuskan untuk sudut 0deg, ke kanan yang setara dengan 90deg, ke bawah yang memutuskan untuk nilai 180deg, dan ke kiri yang sama dengan nilai sudut 270deg.
  • <color-stop> : Nilai diikuti dengan posisi warna berhenti opsional. Posisi berhenti warna dapat diatur dalam nilai persentase atau nilai panjang tetap seperti px, antara lain. Berhenti warna diposisikan sepanjang garis gradient, dan digunakan untuk menentukan titik-titik sepanjang garis bahwa warna mulai.

Contoh Penulisan Script:

3

Dan hasilnya akan seperti ini. Semoga bermanfaat.