Funkcia radial-gradient
Funkcia radial-gradient nastavuje radiálny
gradient. Táto funkcia sa aplikuje na vlastnosti, ktoré
nastavujú obrázok pozadia: background,
background-image
alebo obrázok okraja: border-image,
background-image-source.
Syntax
selektor {
background: radial-gradient([tvar typ pozícia], farba1 veľkosť1, farba2 veľkosť2...);
}
Hodnoty
| Hodnota | Popis |
|---|---|
| tvar |
Prijímané hodnoty:
ellipse eliptický gradient (predvolený),
circle kruhový gradient.
|
| typ |
Nastavuje rozťahovanie gradientu.
Prijímané hodnoty:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| pozícia |
Po kľúčovom slove at
sa uvádza pozícia v ľubovoľných jednotkách pre veľkosť
alebo pomocou kľúčových slov top, bottom,
left, right, center
v rôznych kombináciách.
|
| farba1 | Začiatočná farba gradientu v ľubovoľných jednotkách pre farbu. |
| farba2 | Konečná farba gradientu v ľubovoľných jednotkách pre farbu. |
| veľkosť | Nastavuje rozsah určitej farby gradientu v ľubovoľných jednotkách pre veľkosť. |
Hodnoty pre typ
| Hodnota | Popis |
|---|---|
closest-side |
Tvar gradientu sa zhoduje s najbližšou stranou bloku. |
closest-corner |
Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k najbližšiemu rohu bloku. |
farthest-side |
Gradient sa šíri až k ďalšej strane bloku. |
farthest-corner |
Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k ďalekému rohu bloku. |
Poznámka
Typ a tvar je možné meniť miestami, no pozícia musí ísť na konci prvého parametra. Typ gradientu a jeho veľkosť navzájom nepracujú (logicky, veď sa dostávajú do konfliktu). Vyhráva veľkosť.
Príklad . Najjednoduchší variant
Jednoducho nastavme začiatočnú a konečnú farbu:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Príklad . Pridajme pozíciu
Nastavme polohu stredu:
30px - odsadenie zľava, 100px - odsadenie zhora:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Príklad . Pozícia v percentách
Nastavme polohu stredu v percentách:
30% - odsadenie zľava, 50% - odsadenie zhora:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Príklad . Pozícia kľúčovým slovom
Je možné použiť kľúčové slová
top, bottom, left,
right, center v rôznych
kombináciách. Nastavme napríklad gradient
vpravo v strede:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Príklad . Veľkosť gradientu
V tomto prípade bude gradient fungovať takto:
od 0px do 20px bude čistá
červená farba, od 20px do 60px - gradient
od červenej k modrej, po 60px - čistá
modrá farba:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Príklad . Niekoľko farieb za sebou
V tomto prípade bude gradient fungovať takto:
od 0px do 20px bude čistá
červená farba, od 20px do 40px
bude čistá modrá farba, od 40px
do 60px - gradient od modrej k zelenej,
po 60px - čistá zelená:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Príklad . Veľkosť + pozícia
Nastavme súčasne veľkosti pre rôzne farby a pozíciu stredu gradientu:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Príklad . Tvar gradientu
Tvar gradientu sa nastavuje prvým parametrom
a môže prijať 2 hodnoty: circle
(kruhový gradient) alebo ellipse (eliptický
gradient, predvolený). Prečo sme až doteraz
nevideli eliptické gradienty, hoci
sa nastavuje ako predvolený? Pretože doteraz
bol tvar blokov štvorcový. Ak zmeníme
tvar na obdĺžnikový, uvidíme eliptický
gradient:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Príklad . Kruhový gradient
Vytvorme kruhový gradient v obdĺžnikovom
bloku. Na to nastavme prvým parametrom
tvar gradientu pomocou kľúčového slova
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Príklad . Pridajme pozíciu
Pridajme k predchádzajúcemu kódu ešte aj pozíciu gradientu:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Príklad . Typ farthest-corner + circle
Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k ďalekému rohu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Príklad . Typ farthest-corner + ellipse
Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k ďalekému rohu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Príklad . Typ farthest-side + circle
Gradient sa šíri až k ďalšej strane bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Príklad . Typ farthest-side + ellipse
Gradient sa šíri až k ďalšej strane bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Príklad . Typ closest-corner + circle
Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k najbližšiemu rohu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Príklad . Typ closest-corner + ellipse
Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k najbližšiemu rohu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Príklad . Typ closest-side + circle
Tvar gradientu sa zhoduje s najbližšou k nemu stranou bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Príklad . Typ closest-side + ellipse
Tvar gradientu sa zhoduje s najbližšou k nemu stranou bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Pozri tiež
-
funkciu
linear-gradient,
ktorá vytvára lineárny gradient -
funkciu
repeating-linear-gradient,
ktorá vytvára opakujúci sa lineárny gradient -
funkciu
repeating-radial-gradient,
ktorá vytvára opakujúci sa radiálny gradient
