Линейные градиенты / Hello, linear-gradient! [1/23]
×

Hello, linear-gradient! [1/23]

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

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

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

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

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

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

Спецификация градиентов только недавно устоялась. В этом курсе мы используем новейший синтаксис градиентов. Поэтому лучше обновить браузер.

Если у вас старый браузер, то лучше проверять код с помощью серверной проверки. Также могут возникнуть проблемы с отображением градиентов в мини-браузере.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Hello, linear-gradient!</title> <meta charset="utf-8"> </head> <body> <div class="content"> <h1>Hello, linear-gradient!</h1> </div> </body> </html>
CSS
html, body { height: 100%; margin: 0; } .content { height: 100%; background-color: yellow; } h1 { margin: 0; padding-top: 250px; font-size: 30px; font-family: "Georgia", serif; text-align: center; }
HTML Academy
  1. Добавьте блоку .content свойство background-image со значением linear-gradient(yellow, green).
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.