radial-gradient funksiyası
radial-gradient funksiyası radial
qradient təyin edir. Bu funksiya fon şəkli təyin edən
xassələrə şamil edilir: background,
background-image
və ya sərhəd şəkli: border-image,
background-image-source.
Sintaksis
selektor {
background: radial-gradient([forma tip mövqe], rəng1 ölçü1, rəng2 ölçü2...);
}
Dəyərlər
| Dəyər | Təsvir |
|---|---|
| forma |
Qəbul edilən dəyərlər:
ellipse elliptik qradient (standart olaraq),
circle dairəvi qradient.
|
| tip |
Qradientin uzanmasını təyin edir.
Qəbul edilən dəyərlər:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| mövqe |
at açar sözündən sonra
istənilən ölçü vahidlərində
və ya açar sözlər top, bottom,
left, right, center ilə
müxtəlif kombinasiyalarda mövqe göstərilir.
|
| rəng1 | İstənilən rəng vahidlərində qradientin başlanğıc rəngi. |
| rəng2 | İstənilən rəng vahidlərində qradientin son rəngi. |
| ölçü | Qradientin müəyyən rənginin uzunluğunu istənilən ölçü vahidlərində təyin edir. |
Tip üçün dəyərlər
| Dəyər | Təsvir |
|---|---|
closest-side |
Qradientin forması ona ən yaxın olan blok tərəfi ilə üst-üstə düşür. |
closest-corner |
Qradientin forması ən yaxın küncə olan məsafə haqqında məlumat əsasında hesablanır. |
farthest-side |
Qradient uzaq tərəfə qədər yayılır. |
farthest-corner |
Qradientin forması uzaq küncə olan məsafə haqqında məlumat əsasında hesablanır. |
Qeyd
Tip və forma bir-biri ilə dəyişdirilə bilər, lakin mövqe ilk parametrin sonunda olmalıdır. Qradient tipi və onun ölçüsü bir-biri ilə işləmir (məntiqlidir, çünki onlar toqquşur). Ölçü qalib gəlir.
Nümunə . Ən sadə variant
Gəlin sadəcə başlanğıc və son rəngi təyin edək:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Nümunə . Mövqe əlavə edək
Gəlin mərkəzin mövqeyini təyin edək:
30px - soldan boşluq, 100px - yuxarıdan boşluq:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Nümunə . Faizlə mövqe
Gəlin mərkəzin mövqeyini faizlərlə təyin edək:
30% - soldan boşluq, 50% - yuxarıdan boşluq:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Nümunə . Açar sözlə mövqe
top, bottom, left,
right, center açar sözlərindən istifadə etmək olar.
Müxtəlif kombinasiyalarda. Məsələn, qradienti
solda mərkəzə quraq:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Nümunə . Qradientin ölçüsü
Bu halda qradient belə işləyəcək:
0px-dan 20px-dək təmiz
qırmızı rəng, 20px-dan 60px-dək - qırmızıdan
maviyə qradient, 60px-dan sonra - təmiz
mavi:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Nümunə . Ardıcıl bir neçə rəng
Bu halda qradient belə işləyəcək:
0px-dan 20px-dək təmiz
qırmızı rəng, 20px-dan 40px-dək
təmiz mavi rəng, 40px-dan
60px-dək - mavidən yaşıla qradient,
60px-dan sonra - təmiz yaşıl:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Nümunə . Ölçü + mövqe
Gəlin eyni zamanda müxtəlif rənglər üçün ölçüləri və qradientin mərkəzinin mövqeyini təyin edək:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Nümunə . Qradientin forması
Qradientin forması ilk parametrlə təyin olunur
və 2 dəyər qəbul edə bilər: circle
(dairəvi qradient) və ya ellipse (elliptik
qradient, standart olaraq). Bəs niyə bu vaxta qədər
biz elliptik qradientlər görmədik, baxmayaraq ki,
o standart olaraq təyin olunub? Çünki bu vaxta qədər
blokların forması kvadrat idi. Əgər biz formanı
düzbucaqlıya dəyişsək, onda elliptik qradienti görərik:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Nümunə . Dairəvi qradient
Gəlin düzbucaqlı blokda dairəvi qradient edək.
Bunun üçün ilk parametrdə circle açar sözü ilə
qradientin formasını təyin edək:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Nümunə . Mövqe əlavə edək
Gəlin əvvəlki koda həm də qradientin mövqeyini əlavə edək:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Nümunə . Tip farthest-corner + circle
Qradientin forması uzaq küncə olan məsafə haqqında məlumat əsasında hesablanır:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Nümunə . Tip farthest-corner + ellipse
Qradientin forması uzaq küncə olan məsafə haqqında məlumat əsasında hesablanır:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Nümunə . Tip farthest-side + circle
Qradient uzaq tərəfə qədər yayılır:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Nümunə . Tip farthest-side + ellipse
Qradient uzaq tərəfə qədər yayılır:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Nümunə . Tip closest-corner + circle
Qradientin forması ən yaxın küncə olan məsafə haqqında məlumat əsasında hesablanır:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Nümunə . Tip closest-corner + ellipse
Qradientin forması ən yaxın küncə olan məsafə haqqında məlumat əsasında hesablanır:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Nümunə . Tip closest-side + circle
Qradientin forması ona ən yaxın olan blok tərəfi ilə üst-üstə düşür:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Nümunə . Tip closest-side + ellipse
Qradientin forması ona ən yaxın olan blok tərəfi ilə üst-üstə düşür:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Həmçinin baxın
-
linear-gradientfunksiyası,
linear qradient yaradır -
repeating-linear-gradientfunksiyası,
təkrar olunan linear qradient yaradır -
repeating-radial-gradientfunksiyası,
təkrar olunan radial qradient yaradır
