Fungsi radial-gradient
Fungsi radial-gradient menentukan gradien
radial. Fungsi ini diterapkan pada properti yang
menentukan gambar latar belakang: background,
background-image
atau gambar batas: border-image,
background-image-source.
Sintaksis
selektor {
background: radial-gradient([bentuk tipe posisi], warna1 ukuran1, warna2 ukuran2...);
}
Nilai
| Nilai | Keterangan |
|---|---|
| bentuk |
Nilai yang diterima:
ellipse gradien elips (default),
circle gradien melingkar.
|
| tipe |
Menentukan peregangan gradien.
Nilai yang diterima:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| posisi |
Setelah kata kunci at
ditentukan posisi dalam satuan ukuran apa pun
atau dengan kata kunci top, bottom,
left, right, center
dalam berbagai kombinasi.
|
| warna1 | Warna awal gradien dalam satuan warna apa pun. |
| warna2 | Warna akhir gradien dalam satuan warna apa pun. |
| ukuran | Menentukan rentang warna gradien tertentu dalam satuan ukuran apa pun. |
Nilai untuk Tipe
| Nilai | Keterangan |
|---|---|
closest-side |
Bentuk gradien bertepatan dengan sisi terdekat dari blok. |
closest-corner |
Bentuk gradien dihitung berdasarkan informasi tentang jarak ke sudut terdekat blok. |
farthest-side |
Gradien menyebar ke sisi terjauh blok. |
farthest-corner |
Bentuk gradien dihitung berdasarkan informasi tentang jarak ke sudut terjauh blok. |
Catatan
Tipe dan bentuk dapat ditukar, tetapi posisi harus berada di akhir parameter pertama. Tipe gradien dan ukurannya tidak bekerja satu sama lain (logis, karena mereka bertentangan). Ukuran yang menang.
Contoh . Opsi paling sederhana
Mari kita tentukan warna awal dan akhir:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Contoh . Tambahkan posisi
Mari kita tentukan posisi pusat:
30px - indentasi kiri, 100px - indentasi atas:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Contoh . Posisi dalam persentase
Mari kita tentukan posisi pusat dalam persentase:
30% - indentasi kiri, 50% - indentasi atas:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Contoh . Posisi dengan kata kunci
Anda dapat menggunakan kata kunci
top, bottom, left,
right, center dalam berbagai
kombinasi. Misalnya, letakkan gradien
di kanan tengah:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Contoh . Ukuran gradien
Dalam hal ini, gradien akan bekerja seperti ini:
dari 0px hingga 20px akan menjadi warna
merah murni, dari 20px hingga 60px - gradien
dari merah ke biru, setelah 60px - biru
murni:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Contoh . Beberapa warna berurutan
Dalam hal ini, gradien akan bekerja seperti ini:
dari 0px hingga 20px akan menjadi warna
merah murni, dari 20px hingga 40px
akan menjadi warna biru murni, dari 40px
hingga 60px - gradien dari biru ke hijau,
setelah 60px - hijau murni:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Contoh . Ukuran + posisi
Mari kita tentukan secara bersamaan ukuran untuk warna yang berbeda dan posisi pusat gradien:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Contoh . Bentuk gradien
Bentuk gradien ditentukan oleh parameter pertama
dan dapat mengambil 2 nilai: circle
(gradien melingkar) atau ellipse (gradien elips,
default). Mengapa sampai sekarang
kita tidak melihat gradien elips, meskipun
itu ditetapkan secara default? Karena sebelumnya
bentuk bloknya persegi. Jika kita mengubah
bentuknya menjadi persegi panjang, kita akan melihat gradien elips:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Contoh . Gradien melingkar
Mari kita buat gradien melingkar di dalam
blok persegi panjang. Untuk melakukan ini, atur
bentuk gradien dengan kata kunci
circle sebagai parameter pertama:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Contoh . Tambahkan posisi
Mari tambahkan posisi gradien ke kode sebelumnya:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Contoh . Tipe farthest-corner + circle
Bentuk gradien dihitung berdasarkan informasi tentang jarak ke sudut terjauh blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Tipe farthest-corner + ellipse
Bentuk gradien dihitung berdasarkan informasi tentang jarak ke sudut terjauh blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Tipe farthest-side + circle
Gradien menyebar ke sisi terjauh blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Tipe farthest-side + ellipse
Gradien menyebar ke sisi terjauh blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Tipe closest-corner + circle
Bentuk gradien dihitung berdasarkan informasi tentang jarak ke sudut terdekat blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Tipe closest-corner + ellipse
Bentuk gradien dihitung berdasarkan informasi tentang jarak ke sudut terdekat blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Tipe closest-side + circle
Bentuk gradien bertepatan dengan sisi terdekat dari blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Contoh . Tipe closest-side + ellipse
Bentuk gradien bertepatan dengan sisi terdekat dari blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Lihat juga
-
fungsi
linear-gradient,
yang membuat gradien linear -
fungsi
repeating-linear-gradient,
yang membuat gradien linear berulang -
fungsi
repeating-radial-gradient,
yang membuat gradien radial berulang
