Линейные градиенты / Градиенты по диагоналям [3/23]
×

Градиенты по диагоналям [3/23]

Градиенты можно направлять по диагонали, из угла в угол. Для этого нужно комбинировать top, bottom и left, right. Например, градиент, идущий из левого нижнего в правый верхний угол:

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

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

to right top
to right bottom
to left bottom
to left top

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <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 #16, который стартует 16 января.

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

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

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

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