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

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

И теперь, когда палитра цветов построена, можно немного «поиграть» со шрифтами с базовым цветом и посмотреть, как вместе с ним будут меняться остальные.

Для этого давайте просто поменяем параметры в RGB-записи цвета в переменной @base-color математическими операциями. Кстати, к значению цвета «целиком» тоже можно применять операции. В случае суммы числа и RGB-записи цвета слагаемое будет прибавляться к каждому цветовому каналу одновременно:

rgb(10, 10, 10) + 10

// то же самое, что

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

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Математические операции, шаг 3</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; @error-color: spin(@base-color, @distance); @info-color: spin(@base-color, @distance * -1); @warn-color: spin(@base-color, @distance * 2); @success-color: spin(@base-color, @distance * -2); .color { &-primary { background-color: @base-color; } &-error { background-color: @error-color; } &-info { background-color: @info-color; } &-warning { background-color: @warn-color; } &-success { background-color: @success-color; } } .palette-item { display: inline-block; .color { margin: 0.5em; } }
HTML Academy
  1. Первый RGB-параметр 110 базового цвета @base-color замените на 110 + 50,
  2. второй RGB-параметр умножьте на 2,
  3. от третьего RGB-параметра отнимите 30,
  4. а затем прибавьте 20 к RGB-записи цвета, чтобы получилось rgb(…) + 20 .
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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