Funkce radial-gradient
Funkce radial-gradient nastavuje radiální
přechod. Tato funkce se používá u vlastností, které
nastavují obrázek pozadí: background,
background-image
nebo obrázek ohraničení: border-image,
background-image-source.
Syntaxe
selektor {
background: radial-gradient([tvar typ pozice], barva1 velikost1, barva2 velikost2...);
}
Hodnoty
| Hodnota | Popis |
|---|---|
| tvar |
Přijímané hodnoty:
ellipse eliptický přechod (výchozí),
circle kruhový přechod.
|
| typ |
Nastavuje roztažení přechodu.
Přijímané hodnoty:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| pozice |
Po klíčovém slově at
je určena pozice v libovolných jednotkách pro velikost
nebo pomocí klíčových slov top, bottom,
left, right, center
v různých kombinacích.
|
| barva1 | Počáteční barva přechodu v libovolných jednotkách pro barvu. |
| barva2 | Koncová barva přechodu v libovolných jednotkách pro barvu. |
| velikost | Určuje rozsah určité barvy přechodu v libovolných jednotkách pro velikost. |
Hodnoty pro typ
| Hodnota | Popis |
|---|---|
closest-side |
Tvar přechodu se shoduje s nejbližší stranou bloku. |
closest-corner |
Tvar přechodu se vypočítává na základě informace o vzdálenosti k nejbližšímu rohu bloku. |
farthest-side |
Přechod se šíří k vzdálenější straně bloku. |
farthest-corner |
Tvar přechodu se vypočítává na základě informace o vzdálenosti k vzdálenému rohu bloku. |
Poznámka
Typ a tvar lze zaměnit, ale pozice musí být na konci prvního parametru. Typ přechodu a jeho velikost nepracují spolu (logicky, protože jsou v konfliktu). Vyhrává velikost.
Příklad . Nejjednodušší varianta
Pojďme jednoduše nastavit počáteční a koncovou barvu:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Příklad . Přidáme pozici
Pojďme nastavit polohu středu:
30px - odsazení zleva, 100px - odsazení shora:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Příklad . Pozice v procentech
Pojďme nastavit polohu středu v procentech:
30% - odsazení zleva, 50% - odsazení shora:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Příklad . Pozice klíčovým slovem
Lze použít klíčová slova
top, bottom, left,
right, center v různých
kombinacích. Nastavme například přechod
vpravo uprostřed:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Příklad . Velikost přechodu
V tomto případě bude přechod fungovat takto:
od 0px do 20px bude čistá
červená barva, od 20px do 60px - přechod
od červené k modré, po 60px - čistá
modrá barva:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Příklad . Několik barev za sebou
V tomto případě bude přechod fungovat takto:
od 0px do 20px bude čistá
červená barva, od 20px do 40px
bude čistá modrá barva, od 40px
do 60px - přechod od modré k zelené,
po 60px - čistá zelená:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Příklad . Velikost + pozice
Pojďme současně nastavit velikosti pro různé barvy a pozici středu přechodu:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Příklad . Tvar přechodu
Tvar přechodu je nastaven prvním parametrem
a může přijímat 2 hodnoty: circle
(kruhový přechod) nebo ellipse (eliptický
přechod, výchozí). Proč jsme až dosud
neviděli eliptické přechody, přestože
jsou nastaveny jako výchozí? Protože až dosud
měly bloky čtvercový tvar. Pokud změníme
tvar na obdélníkový, uvidíme eliptický
přechod:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Příklad . Kruhový přechod
Vytvořme kruhový přechod v obdélníkovém
bloku. K tomu nastavme prvním parametrem
tvar přechodu pomocí klíčového slova
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Příklad . Přidáme pozici
Pojďme k předchozímu kódu přidat ještě pozici přechodu:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Příklad . Typ farthest-corner + circle
Tvar přechodu se vypočítává na základě informace o vzdálenosti k vzdálenému rohu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Příklad . Typ farthest-corner + ellipse
Tvar přechodu se vypočítává na základě informace o vzdálenosti k vzdálenému rohu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Příklad . Typ farthest-side + circle
Přechod se šíří k vzdálenější straně bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Příklad . Typ farthest-side + ellipse
Přechod se šíří k vzdálenější straně bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Příklad . Typ closest-corner + circle
Tvar přechodu se vypočítává na základě informace o vzdálenosti k nejbližšímu rohu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Příklad . Typ closest-corner + ellipse
Tvar přechodu se vypočítává na základě informace o vzdálenosti k nejbližšímu rohu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Příklad . Typ closest-side + circle
Tvar přechodu se shoduje s nejbližší k němu stranou bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Příklad . Typ closest-side + ellipse
Tvar přechodu se shoduje s nejbližší k němu stranou bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Viz také
-
funkci
linear-gradient,
která vytváří lineární přechod -
funkci
repeating-linear-gradient,
která vytváří opakující se lineární přechod -
funkci
repeating-radial-gradient,
která vytváří opakující se radiální přechod
