Функцыя linear-gradient
Функцыя linear-gradient задае лінейны
градыент. Ужываецца да ўласцівасцей, якія
задаюць выяву фону: background,
background-image
ці выяву мяжы: border-image,
background-image-source.
Сінтаксіс
селектар {
background: linear-gradient([вугал ці кірунак], колер1 памер1, колер2 памер2...);
}
Значэнні
| Значэнне | Апісанне |
|---|---|
| кірунак |
Задае пэўны кірунак градыенту ў любых адзінках вымярэння для вуглоў
ці ключавымі словамі top, left, right, bottom
ці іх камбінацыяй: top left, top right і гэтак далей.
Парадак словаў не важны: можна пісаць top left і left top,
розніцы няма. Параметр неабавязковы: калі яго не напісаць, градыент будзе
ісці зверху ўніз (як пры to top). Перад кірункам ставіцца слова to.
|
| вугал | Вугал у любых адзінках вымярэння для вуглоў. Можа быць дадатным ці адмоўным. Параметр неабавязковы. Адначасова можа быць зададзены альбо вугал, альбо кірунак (ці наогул нічога). |
| колер1 | Пачатковы колер градыенту ў любых адзінках вымярэння для колеру. |
| колер2 | Канчатковы колер градыенту ў любых адзінках вымярэння для колеру. |
| памер | Задае працягласць пэўнага колеру градыенту ў любых адзінках вымярэння для памеру. |
Прыклад . Самы просты варыянт
Сінтаксіс:
селектар {
background: linear-gradient(пачатковы колер, канчатковы колер);
}
Паглядзім на прыкладзе:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Прыклад . Дадаем вугал
Сінтаксіс:
селектар {
background: linear-gradient(вугал, пачатковы колер, канчатковы колер);
}
Паглядзім на прыкладзе:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Прыклад . Дадаем кірунак
Замест вугла можна дадаць кірунак
top, left, right, bottom
ці іх камбінацыю: top left, top right
Перад кірункам ставіцца слова to.
Сінтаксіс:
селектар {
background: linear-gradient(кірунак, пачатковы колер, канчатковы колер);
}
Паглядзім на прыкладзе:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Прыклад . Дадаем кірунак
Укажам іншы кірунак:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Прыклад . Дадаем памер
Сінтаксіс:
селектар {
background: linear-gradient(колер1 памер1, колер2 памер2);
}
У наступным прыкладзе паводзіны будуць наступныя:
чысты чырвоны колер будзе ад 0px да
30px, ад 30px да 50px
будзе градыент ад чырвонага да блакітнага, а
ад 50px і да канца - чысты блакітны колер:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Прыклад . Дадаем больш чым 2 колеры
Сінтаксіс:
селектар {
background: linear-gradient(колер1 памер1, колер2 памер2, колер3 памер3...);
}
У наступным прыкладзе паводзіны будуць наступныя:
чысты чырвоны колер будзе ад 0px да
30px, ад 30px да 50px
будзе градыент ад чырвонага да блакітнага, а
ад 50px і да 70px - градыент ад блакітнага
да зялёнага, а пасля 70px - чысты зялёны колер:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Прыклад . Рэзкія пераходы
У наступным прыкладзе паводзіны будуць наступныя:
чысты чырвоны колер будзе ад 0px да
30px, чысты блакітны - ад 30px
да 60px, чысты зялёны - пасля 60px
(red 0px можна і не пісаць):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Прыклад . Памеры можна задаваць і ў працэнтах
У наступным прыкладзе паводзіны будуць наступныя:
чысты чырвоны колер будзе ад 0% да
30%, чысты блакітны - ад 30%
да 60%, чысты зялёны - пасля 60%
(red 0% можна і не пісаць):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Прыклад . Спалучэнне з background-size
У наступным прыкладзе паводзіны будуць наступныя:
чысты чырвоны колер будзе ад 0px да
30px, чысты блакітны - ад 30px
да 60px, пры гэтым усё гэта будзе паўтарацца
кавалачкамі па 60px (з-за 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;
}
:
Глядзіце таксама
-
функцыю
radial-gradient,
якая стварае радыяльны градыент -
функцыю
repeating-linear-gradient,
якая стварае паўтаральны лінейны градыент -
функцыю
repeating-radial-gradient,
якая стварае паўтаральны радыяльны градыент
