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