Funkce linear-gradient
Funkce linear-gradient nastavuje lineární
přechod. Používá se u vlastností, které
nastavují obrázek pozadí: background,
background-image
nebo obrázek ohraničení: border-image,
background-image-source.
Syntaxe
selektor {
background: linear-gradient([úhel nebo směr], barva1 velikost1, barva2 velikost2...);
}
Hodnoty
| Hodnota | Popis |
|---|---|
| směr |
Nastavuje konkrétní směr přechodu v libovolných jednotkách pro úhly
nebo klíčovými slovy top, left, right, bottom
nebo jejich kombinací: top left, top right a tak dále.
Pořadí slov není důležité: lze psát top left a left top,
rozdíl není. Parametr je volitelný: pokud není uveden, přechod bude
probíhat shora dolů (jako při to top). Před směrem se píše slovo to.
|
| úhel | Úhel v libovolných jednotkách pro úhly. Může být kladný nebo záporný. Parametr je volitelný. Současně může být zadán buď úhel, nebo směr (nebo vůbec nic). |
| 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 | Nastavuje rozsah konkrétní barvy přechodu v libovolných jednotkách pro velikost. |
Příklad . Nejjednodušší varianta
Syntaxe:
selektor {
background: linear-gradient(počáteční barva, koncová barva);
}
Podívejme se na příkladu:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Příklad . Přidáme úhel
Syntaxe:
selektor {
background: linear-gradient(úhel, počáteční barva, koncová barva);
}
Podívejme se na příkladu:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Příklad . Přidáme směr
Místo úhlu lze přidat směr
top, left, right, bottom
nebo jejich kombinaci: top left, top right
Před směrem se píše slovo to.
Syntaxe:
selektor {
background: linear-gradient(směr, počáteční barva, koncová barva);
}
Podívejme se na příkladu:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Příklad . Přidáme směr
Uveďme jiný směr:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Příklad . Přidáme velikost
Syntaxe:
selektor {
background: linear-gradient(barva1 velikost1, barva2 velikost2);
}
V následujícím příkladu bude chování následující:
čistá červená barva bude od 0px do
30px, od 30px do 50px
bude přechod od červené k modré, a
od 50px a do konce - čistá modrá:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Příklad . Přidáme více než 2 barev
Syntaxe:
selektor {
background: linear-gradient(barva1 velikost1, barva2 velikost2, barva3 velikost3...);
}
V následujícím příkladu bude chování následující:
čistá červená barva bude od 0px do
30px, od 30px do 50px
bude přechod od červené k modré, a
od 50px a do 70px - přechod od modré
k zelené, a po 70px - čistá zelená:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Příklad . Ostré přechody
V následujícím příkladu bude chování následující:
čistá červená barva bude od 0px do
30px, čistá modrá - od 30px
do 60px, čistá zelená - po 60px
(red 0px lze i nepsat):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Příklad . Velikosti lze zadávat i v procentech
V následujícím příkladu bude chování následující:
čistá červená barva bude od 0% do
30%, čistá modrá - od 30%
do 60%, čistá zelená - po 60%
(red 0% lze i nepsat):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Příklad . Kombinace s background-size
V následujícím příkladu bude chování následující:
čistá červená barva bude od 0px do
30px, čistá modrá - od 30px
do 60px, přičemž vše se bude opakovat
po kouscích po 60px (kvůli background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Viz také
-
funkci
radial-gradient,
která vytváří radiální 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
