radial-gradient funktsiyasi
radial-gradient funktsiyasi radial
gradientni belgilaydi. Ushbu funktsiya fon rasmini belgilovchi
xususiyatlarga qo‘llaniladi: background,
background-image
yoki chegaraning rasmini: border-image,
background-image-source.
Sintaksis
selektor {
background: radial-gradient([shakl turi joylashuv], rang1 hajm1, rang2 hajm2...);
}
Qiymatlar
| Qiymat | Tavsif |
|---|---|
| shakl |
Qabul qilinadigan qiymatlar:
ellipse ellips gradient (standart),
circle doiraviy gradient.
|
| tur |
Gradientning cho‘zilishini belgilaydi.
Qabul qilinadigan qiymatlar:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| joylashuv |
at kalit so‘zidan keyin
top, bottom,
left, right, center kalit so‘zlari yordamida
yoki turli xil o‘lchov birliklarida joylashuv ko‘rsatiladi.
|
| rang1 | Gradientning boshlang‘ich rangi, har qanday rang birliklarida. |
| rang2 | Gradientning tugash rangi, har qanday rang birliklarida. |
| hajm | Gradientning ma’lum bir rangining cho‘zilishini har qanday o‘lchov birliklarida belgilaydi. |
Tur uchun qiymatlar
| Qiymat | Tavsif |
|---|---|
closest-side |
Gradient shakli unga eng yaqin blok tomoniga mos keladi. |
closest-corner |
Gradient shakli eng yaqin burchakka masofa haqidagi ma’lumot asosida hisoblanadi. |
farthest-side |
Gradient blokning eng uzoq tomonigacha tarqaladi. |
farthest-corner |
Gradient shakli eng uzoq burchakka masofa haqidagi ma’lumot asosida hisoblanadi. |
Eslatma
Tur va shaklni o‘rinlarini almashtirish mumkin, lekin joylashuv birinchi parametr oxirida bo‘lishi kerak. Gradient turi va uning hajmi bir-biri bilan ishlamaydi (mantiqan, ular ziddiyatli). Hajm ustun keladi.
Misol . Eng oddiy variant
Keling, shunchaki boshlang‘ich va tugash rangini belgilaymiz:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Misol . Joylashuv qo‘shamiz
Keling, markazning o‘rnini belgilaymiz:
30px - chapdan chetlatish, 100px - yuqoridan chetlatish:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Misol . Foizlarda joylashuv
Keling, markazning o‘rnini foizlarda belgilaymiz:
30% - chapdan chetlatish, 50% - yuqoridan chetlatish:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Misol . Kalit so‘z bilan joylashuv
top, bottom, left,
right, center kalit so‘zlaridan turli
kombinatsiyalarda foydalanish mumkin. Masalan, gradientni
o‘ngda markazga qo‘yamiz:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Misol . Gradient hajmi
Bunda gradient shunday ishlaydi:
0px dan 20px gacha toza
qizil rang, 20px dan 60px gacha - gradient
qizildan ko‘k rangga, 60px dan keyin - toza
ko‘k rang:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Misol . Ketma-ket bir nechta rang
Bunda gradient shunday ishlaydi:
0px dan 20px gacha toza
qizil rang, 20px dan 40px gacha
toza ko‘k rang, 40px
dan 60px gacha - ko‘kdan yashil rangga gradient,
60px dan keyin - toza yashil rang:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Misol . Hajm + joylashuv
Keling, bir vaqtning o‘zida turli ranglar uchun hajmlarni va gradient markazining joylashuvini belgilaymiz:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Misol . Gradient shakli
Gradient shakli birinchi parametr bilan belgilanadi
va 2 qiymatni qabul qilishi mumkin: circle
(doiraviy gradient) yoki ellipse (ellips
gradient, standart). Nima uchun bundan oldin
biz ellips gradientlarni ko‘rmaganmiz, garchi
u standart sifatida belgilanmaganmi? Chunki bundan oldin
bloklarning shakli kvadrat edi. Agar biz
shaklni to‘rtburchakka o‘zgartirsak, ellips gradientni
ko‘ramiz:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Misol . Dumaloq gradient
Keling, to‘rtburchak blokda dumaloq gradient qilaylik.
Buning uchun birinchi parametr sifatida gradient shaklini
circle kalit so‘zi yordamida belgilaymiz:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Misol . Joylashuv qo‘shamiz
Keling, oldingi kodga gradient joylashuvini ham qo‘shamiz:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Misol . Tur farthest-corner + circle
Gradient shakli blokning eng uzoq burchagiga masofa haqidagi ma’lumot asosida hisoblanadi:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Misol . Tur farthest-corner + ellipse
Gradient shakli blokning eng uzoq burchagiga masofa haqidagi ma’lumot asosida hisoblanadi:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Misol . Tur farthest-side + circle
Gradient blokning eng uzoq tomonigacha tarqaladi:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Misol . Tur farthest-side + ellipse
Gradient blokning eng uzoq tomonigacha tarqaladi:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Misol . Tur closest-corner + circle
Gradient shakli eng yaqin burchakka masofa haqidagi ma’lumot asosida hisoblanadi:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Misol . Tur closest-corner + ellipse
Gradient shakli eng yaqin burchakka masofa haqidagi ma’lumot asosida hisoblanadi:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Misol . Tur closest-side + circle
Gradient shakli unga eng yaqin blok tomoniga mos keladi:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Misol . Tur closest-side + ellipse
Gradient shakli unga eng yaqin blok tomoniga mos keladi:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Shuningdek qarang
-
linear-gradientfunktsiyasi,
chiziqli gradient yaratadi -
repeating-linear-gradientfunktsiyasi,
takrorlanuvchi chiziqli gradient yaratadi -
repeating-radial-gradientfunktsiyasi,
takrorlanuvchi radial gradient yaratadi
