Funkcija radial-gradient
Funkcija radial-gradient postavlja radijalni
gradijent. Ova funkcija se primenjuje na svojstva koja
postavljaju sliku pozadine: background,
background-image
ili sliku ivice: border-image,
background-image-source.
Sintaksa
selektor {
background: radial-gradient([oblik tip pozicija], boja1 veličina1, boja2 veličina2...);
}
Vrednosti
| Vrednost | Opis |
|---|---|
| oblik |
Prihvaćene vrednosti:
ellipse eliptični gradijent (podrazumevano),
circle kružni gradijent.
|
| tip |
Određuje istezanje gradijenta.
Prihvaćene vrednosti:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| pozicija |
Nakon ključne reči at
navodi se pozicija u bilo kojim jedinicama za veličinu
ili uz pomoć ključnih reči top, bottom,
left, right, center
u različitim kombinacijama.
|
| boja1 | Početna boja gradijenta u bilo kojim jedinicama za boju. |
| boja2 | Krajnja boja gradijenta u bilo kojim jedinicama za boju. |
| veličina | Određuje proširenost određene boje gradijenta u bilo kojim jedinicama za veličinu. |
Vrednosti za tip
| Vrednost | Opis |
|---|---|
closest-side |
Oblik gradijenta se poklapa sa najbližom mu stranom bloka. |
closest-corner |
Oblik gradijenta se izračunava na osnovu informacije o udaljenosti do najbližeg ugla bloka. |
farthest-side |
Gradijent se širi do udaljenije strane bloka. |
farthest-corner |
Oblik gradijenta se izračunava na osnovu informacije o udaljenosti do udaljenijeg ugla bloka. |
Napomena
Tip i oblik mogu da menjaju mesta, dok pozicija mora da ide na kraju prvog parametra. Tip gradijenta i njegova veličina ne rade jedan sa drugim (logično, pošto se sukobljavaju). Pobeđuje veličina.
Primer . Najjednostavnija varijanta
Hajde da jednostavno postavimo početnu i krajnju boju:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Primer . Dodajmo poziciju
Hajde da postavimo položaj centra:
30px - odstupanje levo, 100px - odstupanje odozgo:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Primer . Pozicija u procentima
Hajde da postavimo položaj centra u procentima:
30% - odstupanje levo, 50% - odstupanje odozgo:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Primer . Pozicija ključnom rečju
Možete koristiti ključne reči
top, bottom, left,
right, center u različitim
kombinacijama. Postavimo, na primer, gradijent
desno po centru:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Primer . Veličina gradijenta
U ovom slučaju gradijent će raditi ovako:
od 0px do 20px biće čista
crvena boja, od 20px do 60px - gradijent
od crvene do plave, posle 60px - čista
plava boja:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Primer . Nekoliko boja jedan za drugim
U ovom slučaju gradijent će raditi ovako:
od 0px do 20px biće čista
crvena boja, od 20px do 40px
biće čista plava boja, od 40px
do 60px - gradijent od plave do zelene,
posle 60px - čista zelena boja:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Primer . Veličina + pozicija
Hajde da istovremeno postavimo veličine za različite boje i poziciju centra gradijenta:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Primer . Oblik gradijenta
Oblik gradijenta se postavlja prvim parametrom
i može prihvatiti 2 vrednosti: circle
(kružni gradijent) ili ellipse (eliptični
gradijent, podrazumevano). Zašto onda do sada
nismo videli eliptične gradijente, iako
se postavlja podrazumevano? Zato što je do sada
oblik blokova bio kvadratan. Ako promenimo
oblik na pravougaoni, onda ćemo videti eliptični
gradijent:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Primer . Okrugli gradijent
Hajde da napravimo okrugli gradijent u pravougaonom
bloku. Za ovo postavimo prvim parametrom
oblik gradijenta uz pomoć ključne reči
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Primer . Dodajmo poziciju
Hajde da prethodnom kodu dodamo još i poziciju gradijenta:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Primer . Tip farthest-corner + circle
Oblik gradijenta se izračunava na osnovu informacije o udaljenosti do udaljenijeg ugla bloka:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Primer . Tip farthest-corner + ellipse
Oblik gradijenta se izračunava na osnovu informacije o udaljenosti do udaljenijeg ugla bloka:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Primer . Tip farthest-side + circle
Gradijent se širi do udaljenije strane bloka:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Primer . Tip farthest-side + ellipse
Gradijent se širi do udaljenije strane bloka:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Primer . Tip closest-corner + circle
Oblik gradijenta se izračunava na osnovu informacije o udaljenosti do najbližeg ugla bloka:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Primer . Tip closest-corner + ellipse
Oblik gradijenta se izračunava na osnovu informacije o udaljenosti do najbližeg ugla bloka:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Primer . Tip closest-side + circle
Oblik gradijenta se poklapa sa najbližom mu stranom bloka:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Primer . Tip closest-side + ellipse
Oblik gradijenta se poklapa sa najbližom mu stranom bloka:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Pogledajte takođe
-
funkciju
linear-gradient,
koja kreira linearni gradijent -
funkciju
repeating-linear-gradient,
koja kreira ponavljajući linearni gradijent -
funkciju
repeating-radial-gradient,
koja kreira ponavljajući radijalni gradijent
