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

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

Ещё две LESS-функции для работы с цветом: saturate и desaturate. Они увеличивают и уменьшают насыщенность заданного цвета. Их синтаксис такой же как и у lighten/darken:

color: saturate(green, 20%); // green насыщеннее на 20%
color: desaturate(blue, 50%); // blue бледнее на 50%

Функцию desaturate мы используем для создания стиля «отключенной» кнопки. Совместно с desaturate воспользуемся lighten, чтобы сделать кнопку бледной и светлой. Одновременно функции цвета можно использовать так:

// цвет светлее красного на 50% и насыщеннее на 20%
color: saturate(lighten(red, 50%), 20%);

//цвет темнее синего на 20% и бледнее на 50%
color: desaturate(darken(blue, 20%), 50%);

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


Выполнить задание
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="controls"> <h1>Кнопки</h1> <section> <h2>default</h2> <button class="btn btn-primary">Нажать</button> </section> <section> <h2>hover</h2> <button class="btn btn-primary-hover">Нажать</button> </section> <section> <h2>pressed</h2> <button class="btn btn-primary-pressed">Нажать</button> </section> <section> <h2>disabled</h2> <button class="btn btn-primary-disabled">Нажать</button> </section> </article> </body> </html>
LESS CSS
@base-color: rgb(110, 27, 255); @alter-color: spin(@base-color, 60); .btn { &-primary { background-color: @base-color; &-hover, &:hover { background-color: lighten(@base-color, 20%); } &-pressed, &:active { background-color: darken(@base-color, 20%); } /* &-правило добавьте тут */ } }
HTML Academy
  1. Внутри правила &-primary кнопки .btn создайте вложенное правило &-disabled, в котором задайте цвет текста rgba(255, 255, 255, 0.8) и цвет фона светлее @base-color на 20%.
  2. Затем уменьшите насыщенность получившегося цвета фона с помощью функции desaturate на 70%.
  1. Поменяйте базовый цвет кнопок на альтернативный
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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