Линейные градиенты / Направление градиента [2/23]
×

Направление градиента [2/23]

Направления градиента задаются с помощью ключевых слов: top, bottom, left, right.

Направление градиента располагается перед списком цветов и включает в себя частицу to. Она была добавлена в синтаксис для улучшения читабельности и наглядности:

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

И сразу понятно, что это: «Жёлто-зелёный градиент слева направо».

Вот примеры разных направлений градиента c цветами yellow, green:

to right
to left
to bottom
to top

А теперь самостоятельно потренируйтесь задавать разные направления градиентов.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Направление градиента</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; background-image: none; /* Цвета градиента: yellow, green */ } h1 { margin: 0; padding-top: 250px; font-size: 30px; font-family: "Georgia", serif; text-align: center; }
HTML Academy

Задайте для .content жёлто-зелёный градиент с направлениями:

  1. слева направо
  2. справа налево
  3. сверху
    вниз
  4. снизу
    вверх
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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