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

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

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

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

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

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

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

Выполнить задание
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.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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