Funcția radial-gradient
Funcția radial-gradient definește un gradient
radial. Această funcție se aplică proprietăților care
definesc imaginea de fundal: background,
background-image
sau imaginea bordurii: border-image,
background-image-source.
Sintaxă
selector {
background: radial-gradient([formă tip poziție], culoare1 dimensiune1, culoare2 dimensiune2...);
}
Valori
| Valoare | Descriere |
|---|---|
| formă |
Valori acceptate:
ellipse gradient eliptic (implicit),
circle gradient circular.
|
| tip |
Definește întinderea gradientului.
Valori acceptate:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| poziție |
După cuvântul cheie at
se specifică poziția în orice unitate de măsură pentru dimensiuni
sau folosind cuvintele cheie top, bottom,
left, right, center
în diverse combinații.
|
| culoare1 | Culoarea de început a gradientului în orice unitate de măsură pentru culori. |
| culoare2 | Culoarea de sfârșit a gradientului în orice unitate de măsură pentru culori. |
| dimensiune | Definește întinderea unei anumite culori a gradientului în orice unitate de măsură pentru dimensiuni. |
Valori pentru tip
| Valoare | Descriere |
|---|---|
closest-side |
Forma gradientului coincide cu latura cea mai apropiată de acesta a blocului. |
closest-corner |
Forma gradientului este calculată pe baza informației despre distanța până la cel mai apropiat colț al blocului. |
farthest-side |
Gradientul se extinde până la latura cea mai îndepărtată a blocului. |
farthest-corner |
Forma gradientului este calculată pe baza informației despre distanța până la colțul cel mai îndepărtat al blocului. |
Observație
Tipul și forma pot fi schimbate între ele, dar poziția trebuie să fie la sfârșitul primului parametru. Tipul gradientului și dimensiunea acestuia nu funcționează unul cu celălalt (logic, ele intră în conflict). Câștigă dimensiunea.
Exemplu . Cea mai simplă variantă
Să setăm pur și simplu culoarea de început și de sfârșit:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Exemplu . Adăugăm poziție
Să setăm poziția centrului:
30px - indentare din stânga, 100px - indentare de sus:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Exemplu . Poziție în procente
Să setăm poziția centrului în procente:
30% - indentare din stânga, 50% - indentare de sus:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Exemplu . Poziție prin cuvânt cheie
Se pot folosi cuvintele cheie
top, bottom, left,
right, center în diverse
combinații. Să plasăm, de exemplu, gradientul
în dreapta centrat:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Exemplu . Dimensiunea gradientului
În acest caz gradientul va funcționa astfel:
de la 0px până la 20px va fi culoare
roșie pură, de la 20px până la 60px - gradient
de la roșu la albastru, după 60px - albastru
pur:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Exemplu . Mai multe culori la rând
În acest caz gradientul va funcționa astfel:
de la 0px până la 20px va fi culoare
roșie pură, de la 20px până la 40px
va fi culoare albastră pură, de la 40px
până la 60px - gradient de la albastru la verde,
după 60px - verde pur:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Exemplu . Dimensiune + poziție
Să setăm simultan dimensiunile pentru diferite culori și poziția centrului gradientului:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Exemplu . Forma gradientului
Forma gradientului este setată de primul parametru
și poate lua 2 valori: circle
(gradient circular) sau ellipse (gradient
eliptic, implicit). De ce până acum
nu am văzut gradient eliptic, deși
el este setat implicit? Pentru că până acum
forma blocurilor era pătrată. Dacă schimbăm
forma în dreptunghiulară, vom vedea gradientul
eliptic:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exemplu . Gradient circular
Să facem un gradient circular într-un bloc
dreptunghiular. Pentru aceasta, să setăm primul parametru
forma gradientului folosind cuvântul cheie
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exemplu . Adăugăm poziție
Să adăugăm la codul anterior și poziția gradientului:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exemplu . Tip farthest-corner + circle
Forma gradientului este calculată pe baza informației despre distanța până la colțul cel mai îndepărtat al blocului:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplu . Tip farthest-corner + ellipse
Forma gradientului este calculată pe baza informației despre distanța până la colțul cel mai îndepărtat al blocului:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplu . Tip farthest-side + circle
Gradientul se extinde până la latura cea mai îndepărtată a blocului:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplu . Tip farthest-side + ellipse
Gradientul se extinde până la latura cea mai îndepărtată a blocului:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplu . Tip closest-corner + circle
Forma gradientului este calculată pe baza informației despre distanța până la cel mai apropiat colț al blocului:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplu . Tip closest-corner + ellipse
Forma gradientului este calculată pe baza informației despre distanța până la cel mai apropiat colț al blocului:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplu . Tip closest-side + circle
Forma gradientului coincide cu latura cea mai apropiată de acesta a blocului:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemplu . Tip closest-side + ellipse
Forma gradientului coincide cu latura cea mai apropiată de acesta a blocului:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Vedeți și
-
funcția
linear-gradient,
care creează un gradient linear -
funcția
repeating-linear-gradient,
care creează un gradient linear repetat -
funcția
repeating-radial-gradient,
care creează un gradient radial repetat
