• Теория
  • Теория

Hello, linear-gradient!

В математике градиент — это функция, показывающая направление наискорейшего возрастания некоторой величины, значение которой меняется от одной точки пространства к другой.

Если применить градиент к цвету, то получится плавный переход от одного цвета к другому. Например, вот такой:

Градиенты описываются внутри CSS-свойства background-image. Простейший градиент можно описать таким образом:

background-image: linear-gradient(yellow, green);

Сам градиент создаётся функцией linear-gradient, в параметрах которой указываются направление градиента и набор цветов. Направление можно не указывать, тогда будет использовано значение по умолчанию — сверху вниз. Цветов может быть любое количество.

Давайте потренируемся и создадим простейший двухцветный градиент для блока .content.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Линейные градиенты» тренажёра «Погружение в декоративные эффекты» можно после регистрации и оформления подписки.