Funkcia linear-gradient
Funkcia linear-gradient nastavuje lineárny
gradient. Aplikuje sa na vlastnosti, ktoré
nastavujú obrázok pozadia: background,
background-image
alebo obrázok okraja: border-image,
background-image-source.
Syntax
selektor {
background: linear-gradient([uhol alebo smer], farba1 veľkosť1, farba2 veľkosť2...);
}
Hodnoty
| Hodnota | Popis |
|---|---|
| smer |
Nastavuje určitý smer gradientu v ľubovoľných jednotkách pre uhly
alebo kľúčovými slovami top, left, right, bottom
alebo ich kombináciou: top left, top right a tak ďalej.
Poradie slov nie je dôležité: možno písať top left a left top,
rozdiel nie je. Parameter je voliteľný: ak sa nenapíše, gradient bude
ísť zhora nadol (ako pri to top). Pred smerom sa kladie slovo to.
|
| uhol | Uhol v ľubovoľných jednotkách pre uhly. Môže byť kladný alebo záporný. Parameter je voliteľný. Súčasne môže byť zadaný buď uhol, alebo smer (alebo vôbec nič). |
| farba1 | Poč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ť. |
Príklad . Najjednoduchšia možnosť
Syntax:
selektor {
background: linear-gradient(počiatočná farba, konečná farba);
}
Pozrime sa na príklade:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Príklad . Pridáme uhol
Syntax:
selektor {
background: linear-gradient(uhol, počiatočná farba, konečná farba);
}
Pozrime sa na príklade:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Príklad . Pridáme smer
Namiesto uhla možno pridať smer
top, left, right, bottom
alebo ich kombináciu: top left, top right
Pred smerom sa kladie slovo to.
Syntax:
selektor {
background: linear-gradient(smer, počiatočná farba, konečná farba);
}
Pozrime sa na príklade:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Príklad . Pridáme smer
Zadajme iný smer:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Príklad . Pridáme veľkosť
Syntax:
selektor {
background: linear-gradient(farba1 veľkosť1, farba2 veľkosť2);
}
V nasledujúcom príklade bude správanie nasledovné:
čistá červená farba bude od 0px do
30px, od 30px do 50px
bude gradient od červenej po modrú, a
od 50px a do konca - čistá modrá:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Príklad . Pridáme viac ako 2 farby
Syntax:
selektor {
background: linear-gradient(farba1 veľkosť1, farba2 veľkosť2, farba3 veľkosť3...);
}
V nasledujúcom príklade bude správanie nasledovné:
čistá červená farba bude od 0px do
30px, od 30px do 50px
bude gradient od červenej po modrú, a
od 50px a do 70px - gradient od modrej
po zelenú, a po 70px - čistá zelená:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Príklad . Ostré prechody
V nasledujúcom príklade bude správanie nasledovné:
čistá červená farba bude od 0px do
30px, čistá modrá - od 30px
do 60px, čistá zelená - po 60px
(red 0px možno aj nepísať):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Príklad . Veľkosti možno zadať aj v percentách
V nasledujúcom príklade bude správanie nasledovné:
čistá červená farba bude od 0% do
30%, čistá modrá - od 30%
do 60%, čistá zelená - po 60%
(red 0% možno aj nepísať):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Príklad . Kombinácia s background-size
V nasledujúcom príklade bude správanie nasledovné:
čistá červená farba bude od 0px do
30px, čistá modrá - od 30px
do 60px, pričom všetko toto sa bude opakovať
kúskami 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;
}
:
Pozri tiež
-
funkciu
radial-gradient,
ktorá vytvára radiálny 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
