Функција 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,
која креира понављајући радијални градијент
