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