Знакомство с LESS / Цветовые функции, шаг 4 [12/14]
×

Цветовые функции, шаг 4 [12/14]

Теперь перейдём к созданию цветных информационных сообщений. Они будут кодироваться теми же цветами из палитры: основным, контрастным, информационным, предупреждающим и успешным. С помощью цветовых функций и их комбинаций давайте подберём подходящие оттенки для элементов сообщений.

Фоновый цвет блоков сделаем светлее основного. Цвет границ — немного темнее и контрастнее фонового цвета. Цвет текста — ещё более темным, чем цвет фона.

Воспользуемся уже известными нам функциями lighten, darken, spin и их комбинациями.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Цветовые функции, шаг 4</title> <meta charset="utf-8"> <base href="/assets/course85/"> <link href="course.css" rel="stylesheet"> </head> <body> <article class="alerts"> <h1>Сообщения</h1> <section> <p class="alert alert-primary"><strong>Объявление.</strong> Так оформляется обычное сообщение.</p> </section> </article> </body> </html>
LESS CSS
@base-color: rgb(110, 27, 255); @alert-primary-bg: white; @alert-primary-border: white; @alert-primary-text: black; .alert { &-primary { background-color: @alert-primary-bg; border-color: @alert-primary-border; color: @alert-primary-text; } }
HTML Academy
  1. Задайте переменной @alert-primary-bg цвет светлее базового на 35%.
  2. Задайте переменной @alert-primary-border значение, сдвинутое от @alert-primary-bg функцией spin на -10 и затемнённое на 5%.
  3. Задайте переменной @alert-primary-text цвет темнее @alert-primary-bg на 50%.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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