Линейный градиент: linear-gradient()

linear-gradient

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 10.0 3.6 10.0 11.10 5.1
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.1.1 1.0 8.0 12.10 8.1
Линейный градиент
linear-gradient() — этот градиент позволяет переходить от одного цвета к другому по одной или нескольким точкам, но вдоль одной линии
Описание
Градиент работает следующим образом: первым делом выбирается угол линии на которой будут располагаться точки цвета. Этот угол можно задавать либо в градусах либо с помощью ключевых слов. Если угол задается в градусах, то: 0deg — этот угол соответствует позиции 12 часов, 90deg — этот угол соответствует позиции 3 часа, 180deg — этот угол соответствует позиции 6 часов, 270deg — этот угол соответствует позиции 9 часов. Если угол задается с помощью ключевых слов, то: to top — этот угол соответствует позиции 12 часов, to right — этот угол соответствует позиции 3 часа, to bottom — этот угол соответствует позиции 6 часов, to left — этот угол соответствует позиции 9 часов. Также можно ставить процентные значения, которые позволяют изменять цвет на указанный в том месте где будет расчитано процентное значение. Например, если стоит red 25%, то браузер высчитает 25% от размера родительского элемента и поменяет в этом месте цвет на red.
Применяется к свойствам
background-image | border-image | list-style-image
Угол может принимать значения
0deg…360deg или to top | to right | to bottom | to left
Правила записи
свойство: linear-gradient(значение угла или ключевое слово, значение цвета1, значение цвета2, …, значение цветаn);

  • Все значения перечисляются через запятую
  • Колличество значений цвета не ограничено
  • Есть возможность точно указать точку начала указанного цвета, для этого применяются процентные значения, например, если нужно указать что красный цвет должен начинаться с точки равной четверти от размера элемента, то нужно записать red 25%
Примеры

<p>

Это правило применит к абзацу линейный градиент который состоит из двух цветов: green и blue

</p>

<div>

Это правило применит к контейнеру линейный градиент который состоит из трех цветов: orange, aqua и tomato

</div>

<p>

Это правило применит к <em>элементу em</em> линейный градиент который состоит из двух цветов: gray и yellow

</p>

<p>

Это правило применит к абзацу линейный градиент который состоит из двух цветов: black и red, причем цвет red начнет заполнять элемент с точно указанной позиции, а именно с 10% от размера элемента

</p>

Это правило применит к маркеру элемента списка линейный градиент который состоит из двух цветов, цвета red и цвета green

<ul>

  • Значение списка
  • Значение списка
  • Значение списка

</ul>

Поделиться