мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Функция 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: to top, to bottom и так далее.

Синтаксис:

селектор { 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 можно и не писать):

селектор { background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px); }

Пример . Размеры можно задавать и в процентах

В следующем примере поведение будет следующее: чистый красный цвет будет от 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; }

:

Смотрите также

  • функцию linear-gradient,
    которая создает линейный градиент
  • функцию radial-gradient,
    которая создает радиальный градиент
  • функцию repeating-linear-gradient,
    которая создает повторяющийся линейный градиент
  • функцию repeating-radial-gradient,
    которая создает повторяющийся радиальный градиент