Funkcija radial-gradient
Funkcija radial-gradient definē radiālu
gradientu. Šī funkcija tiek lietota īpašībām, kas
definē fona attēlu: background,
background-image
vai robežas attēlu: border-image,
background-image-source.
Sintakse
selektors {
background: radial-gradient([forma tips pozīcija], krāsa1 izmērs1, krāsa2 izmērs2...);
}
Vērtības
| Vērtība | Apraksts |
|---|---|
| forma |
Pieņemtās vērtības:
ellipse eliptisks gradients (pēc noklusējuma),
circle apļveida gradients.
|
| tips |
Norāda gradienta izstiepšanos.
Pieņemtās vērtības:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| pozīcija |
Pēc atslēgvārda at
tiek norādīta pozīcija jebkuros izmēra mērvienības
vai ar atslēgvārdu palīdzību top, bottom,
left, right, center
dažādās kombinācijās.
|
| krāsa1 | Sākuma gradienta krāsa jebkuros krāsas mērvienības. |
| krāsa2 | Beigu gradienta krāsa jebkuros krāsas mērvienības. |
| izmērs | Norāda noteiktas gradienta krāsas izplatību jebkuros izmēra mērvienības. |
Vērtības tipam
| Vērtība | Apraksts |
|---|---|
closest-side |
Gradienta forma sakrīt ar tai tuvāko bloka malu. |
closest-corner |
Gradienta forma tiek aprēķināta, balstoties uz informāciju par attālumu līdz tuvākajam bloka stūrim. |
farthest-side |
Gradients izplatās līdz tālākajai bloka malai. |
farthest-corner |
Gradienta forma tiek aprēķināta, balstoties uz informāciju par attālumu līdz tālajam bloka stūrim. |
Piezīme
Tipu un formu var apmainīt vietām, bet pozīcijai jāatrodas pirmā parametra beigās. Gradienta tips un tā izmērs nestrādā viens ar otru (loģiski, jo tie konfliktē). Uzvar izmērs.
Piemērs . Vienkāršākais variants
Vienkārši norādīsim sākuma un beigu krāsu:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Piemērs . Pievienosim pozīciju
Norādīsim centra novietojumu:
30px - atkāpe no kreisās puses, 100px - atkāpe no augšas:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Piemērs . Pozīcija procentos
Norādīsim centra novietojumu procentos:
30% - atkāpe no kreisās puses, 50% - atkāpe no augšas:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Piemērs . Pozīcija ar atslēgvārdu
Var izmantot atslēgvārdus
top, bottom, left,
right, center dažādās
kombinācijās. Novietosim, piemēram, gradientu
labajā pusē centrā:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Piemērs . Gradienta izmērs
Šajā gadījumā gradients darbosies šādi:
no 0px līdz 20px būs tīri
sarkana krāsa, no 20px līdz 60px - gradients
no sarkanas uz gaiši zilu, pēc 60px - tīri
gaiši zila:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Piemērs . Vairākas krāsas pēc kārtas
Šajā gadījumā gradients darbosies šādi:
no 0px līdz 20px būs tīri
sarkana krāsa, no 20px līdz 40px
būs tīri gaiši zila krāsa, no 40px
līdz 60px - gradients no gaiši zilas uz zaļu,
pēc 60px - tīri zaļa:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Piemērs . Izmērs + pozīcija
Vienlaicīgi norādīsim izmērus dažādām krāsām un gradienta centra pozīciju:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Piemērs . Gradienta forma
Gradienta forma tiek norādīta ar pirmo parametru
un var pieņemt 2 vērtības: circle
(apļveida gradients) vai ellipse (eliptisks
gradients, pēc noklusējuma). Kāpēc tad līdz šim
mēs neredzējām eliptiskus gradientus, lai gan
tie ir norādīti pēc noklusējuma? Tāpēc, ka līdz šim
bloku formas bija kvadrātveida. Ja mēs mainīsim
formu uz taisnstūrveida, tad ieraudzīsim eliptisku
gradientu:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Piemērs . Apaļš gradients
Izveidosim apļveida gradientu taisnstūrveida
blokā. Lai to izdarītu, norādīsim pirmo parametru
gradienta formu ar atslēgvārda
circle palīdzību:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Piemērs . Pievienosim pozīciju
Iepriekšējam kodam pievienosim vēl gradienta pozīciju:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Piemērs . Tips farthest-corner + circle
Gradienta forma tiek aprēķināta, balstoties uz informāciju par attālumu līdz tālajam bloka stūrim:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Piemērs . Tips farthest-corner + ellipse
Gradienta forma tiek aprēķināta, balstoties uz informāciju par attālumu līdz tālajam bloka stūrim:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Piemērs . Tips farthest-side + circle
Gradients izplatās līdz tālākajai bloka malai:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Piemērs . Tips farthest-side + ellipse
Gradients izplatās līdz tālākajai bloka malai:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Piemērs . Tips closest-corner + circle
Gradienta forma tiek aprēķināta, balstoties uz informāciju par attālumu līdz tuvākajam bloka stūrim:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Piemērs . Tips closest-corner + ellipse
Gradienta forma tiek aprēķināta, balstoties uz informāciju par attālumu līdz tuvākajam bloka stūrim:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Piemērs . Tips closest-side + circle
Gradienta forma sakrīt ar tai tuvāko bloka malu:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Piemērs . Tips closest-side + ellipse
Gradienta forma sakrīt ar tai tuvāko bloka malu:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Skatiet arī
-
funkciju
linear-gradient,
kas veido lineāru gradientu -
funkciju
repeating-linear-gradient,
kas veido atkārtojošos lineāru gradientu -
funkciju
repeating-radial-gradient,
kas veido atkārtojošos radiālu gradientu
