Знакомство с LESS / Испытание: палитра [14/14]

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения.

Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью

ВК ВКонтакте или FB Facebook

×

Испытание: палитра [14/14]

Итак, мы разобрались как создать палитру цветов, основанную на цветовом кодировании. На основе разработанной палитры можно оформить цветом любой элемент интерфейса. При этом цвета всех элементов будут консистентны и их можно легко конфигурировать.

Этот курс — первый из цикла по LESS. В нём затронуты самые базовые понятия и приёмы. В последующих курсах мы рассмотрим другие возможности препроцессора, а также продолжим создавать нашу библиотеку стилей.

А напоследок осталась небольшая головоломка. Вам нужно раскрасить белые квадраты.

В раскрашенных квадратах есть стрелки, которые указывают на соседние пустые квадраты. Это подсказка: цвет для пустого квадрата рассчитывается от цвета указывающего на него квадрата.

Для вычисления цвета используйте цветовые функции, рассмотренные в курсе: lighten, desaturate, darken, spin. Числовые параметры функций кратны 5.

До встречи на следующих курсах по LESS!


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Испытание: палитра</title> <meta charset="utf-8"> <base href="/assets/course85/"> <link href="course.css" rel="stylesheet"> </head> <body> <div class="palette-case"> <div class="color-1">&rarr;</div> <div class="color-2">•</div> <div class="color-3">&darr;</div> <div class="color-4">•</div> <div class="color-5">&larr;</div> <div class="color-6">&darr;</div> <div class="color-7">&rarr;</div> <div class="color-8">•</div> <div class="color-9">•</div> </div> </body> </html>
LESS CSS
@color-1: #0074d9; @color-2: white; @color-3: #ff4136; @color-4: white; @color-5: #2ecc40; @color-6: white; @color-7: #ffdc00; @color-8: white; @color-9: white; .color-1 { background-color: @color-1; } .color-2 { background-color: @color-2; } .color-3 { background-color: @color-3; } .color-4 { background-color: @color-4; } .color-5 { background-color: @color-5; } .color-6 { background-color: @color-6; } .color-7 { background-color: @color-7; } .color-8 { background-color: @color-8; } .color-9 { background-color: @color-9; }
<HTML Academy>
?

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

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

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

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