Знакомство с LESS / Математические операции, шаг 2 [8/14]
×

Математические операции, шаг 2 [8/14]

Осталось добавить ещё два цвета. Чтобы их вычислить, мы «повернём» круг на двойное расстояние @distance от базового цвета в обе стороны.

Получившиеся цвета будут комплементарными по отношению к инфо-цвету и цвету ошибки. Это именно то, что нужно: к примеру, по смыслу цвет ошибки полностью противоположен цвету успеха, поэтому они должны быть максимально контрастны.

Из математических операций используем умножение дистанции на 2.

Давайте же завершим нашу палитру.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Математические операции, шаг 2</title> <meta charset="utf-8"> <base href="/assets/course85/"> <link href="course.css" rel="stylesheet"> </head> <body> <article class="palette"> <h1>Базовые цвета</h1> <figure class="palette-item"> <figcaption>Основной</figcaption> <span class="color color-primary">primary</span> </figure> <figure class="palette-item"> <figcaption>Ошибка</figcaption> <span class="color color-error">error</span> </figure> <figure class="palette-item"> <figcaption>Инфо</figcaption> <span class="color color-info">info</span> </figure> <figure class="palette-item"> <figcaption>Сигнал</figcaption> <span class="color color-warning">warning</span> </figure> <figure class="palette-item"> <figcaption>Успех</figcaption> <span class="color color-success">success</span> </figure> </article> </body> </html>
LESS CSS
@base-color: rgb(110, 27, 255); @distance: 60; @invert-distance: @distance * -1; @error-color: spin(@base-color, @distance); @info-color: spin(@base-color, @invert-distance); @warning-color: #cccccc; @success-color: #cccccc; .color { &-primary { background-color: @base-color; } &-error { background-color: @error-color; } &-info { background-color: @info-color; } &-warning { background-color: @warning-color; } &-success { background-color: @success-color; } } .palette-item { display: inline-block; .color { margin: 0.5em; } }
HTML Academy
  1. Значение переменной @warning-color вычислите функцией spin: поверните базовый цвет @base-color на двойную величину @distance.
  2. Значение переменной @success-color вычислите функцией spin: поверните базовый цвет @base-color на двойную величину @invert-distance.
Теория Проверить Следующее задание
Идёт запись на курс Базовый JavaScript #9, который стартует 21 марта.

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

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

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

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