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

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

Теперь создадим стили для остальных блоков сообщений.

Будем использовать те же функции, но только с другими цветами, от которых ведётся отсчёт. В этом задании переменные уже созданы, но они привязаны к базовому цвету. Нужно будет лишь заменить в функциях переменную базового цвета на переменные подходящих цветов.

Вынос всех цветов в переменные — очень прагматичный подход. Переменные можно легко собрать в одном файле, что позволяет гибко конфигурировать внешний вид базовых компонентов.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Цветовые функции, шаг 5</title> <meta charset="utf-8"> <base href="/assets/course85/"> <link href="course.css" rel="stylesheet"> </head> <body> <article class="alerts"> <h1>Сообщения</h1> <section> <p class="alert alert-primary"><strong>Объявление.</strong> Так оформляется обычное сообщение.</p> </section> <section> <p class="alert alert-error"><strong>Ошибка.</strong> А так выглядит сообщение об ошибке.</p> </section> <section> <p class="alert alert-info"><strong>Сообщение.</strong> Это просто блок инфомации.</p> </section> <section> <p class="alert alert-warning"><strong>Внимание.</strong> А на это стоит обратить внимание.</p> </section> <section> <p class="alert alert-success"><strong>Успех.</strong> В этом сообщении удача улыбается вам.</p> </section> </article> </body> </html>
LESS CSS
/*----- Основные цвета -----*/ @base-color: rgb(110, 27, 255); @error-color: spin(@base-color, 60); @info-color: spin(@base-color, -60); @warning-color: spin(@base-color, 120); @success-color: spin(@base-color, -120); /*----- Цвета сообщений -----*/ @alert-primary-bg: lighten(@base-color, 35%); @alert-primary-border: darken(spin(@alert-primary-bg, -10), 5%); @alert-primary-text: darken(@alert-primary-bg, 50%); @alert-error-bg: lighten(@base-color, 35%); @alert-error-border: darken(spin(@alert-error-bg, -10), 5%); @alert-error-text: darken(@alert-error-bg, 50%); @alert-info-bg: lighten(@base-color, 35%); @alert-info-border: darken(spin(@alert-info-bg, -10), 5%); @alert-info-text: darken(@alert-info-bg, 50%); @alert-warning-bg: lighten(@base-color, 35%); @alert-warning-border: darken(spin(@alert-warning-bg, -10), 5%); @alert-warning-text: darken(@alert-warning-bg, 50%); /*----- Правила сообщений -----*/ .alert { &-primary { background-color: @alert-primary-bg; border-color: @alert-primary-border; color: @alert-primary-text; } &-error { background-color: @alert-error-bg; border-color: @alert-error-border; color: @alert-error-text; } &-info { background-color: @alert-info-bg; border-color: @alert-info-border; color: @alert-info-text; } &-warning { background-color: @alert-warning-bg; border-color: @alert-warning-border; color: @alert-warning-text; } }
HTML Academy
  1. Замените переменную @base-color на @error-color в функции для расчёта @alert-error-bg (15 строка).
  2. Замените переменную @base-color на @info-color в функции для расчёта @alert-info-bg (19 строка).
  3. Замените переменную @base-color на @warning-color в функции для расчёта @alert-warning-bg (23 строка).
  1. Раскрасьте оставшееся сообщение
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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