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

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

Направление линейного градиента можно задавать и в виде произвольного угла, например, 245°. Направление в градусах задаётся с помощью единицы измерения deg. Можно задавать положительные и отрицательные углы. Примеры:

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

Углы градиента отсчитываются так:

0deg соответствует 12 часам, а отсчёт угла идет по часовой стрелке. В случае, если угол задан отрицательным значением, например, -90deg, то он отсчитывается против часовой стрелки.

В этом задании нужно прописать оставшимся трём «листам» градиенты по аналогии с первым: от цветного края «листа» к чёрному центру «цветка».

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Градиенты под углом</title> <meta charset="utf-8"> </head> <body> <div class="flower"> <div class="leaf leaf-top-left"></div> <div class="leaf leaf-top-right"></div> <div class="leaf leaf-bottom-left"></div> <div class="leaf leaf-bottom-right"></div> </div> </body> </html>
CSS
.leaf-top-left { background-image: linear-gradient(135deg, #ff0000, #000000); } .leaf-top-right { /*градиент от #00ff00 к #000000*/ } .leaf-bottom-right { /*градиент от #ffff00 к #000000*/ } .leaf-bottom-left { /*градиент от #ff00ff к #000000*/ } .leaf-top-left, .leaf-bottom-right { border-radius: 0 50%; } .leaf-top-right, .leaf-bottom-left { border-radius: 50% 0; } .leaf { width: 150px; height: 150px; margin: 0; float: left; background-color: #dfdfdf; } .flower { width: 300px; margin: 0 auto; padding-top: 80px; } html, body { height: 100%; margin: 0; }
HTML Academy

Завершите раскраску цветка с помощью градиентов:

  1. Верхнему правому листку задайте градиент под углом 225°.
  2. Нижнему правому листку задайте градиент под углом 315°.
  3. Нижнему левому листку задайте градиент под углом 45°.

Цвета листков указаны в комментариях в CSS.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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