Урок 06. Задания
⚡ Кратко
Три задания на систему цвета и четыре вопроса.
Задания
Задание 1. Набор статусов
Сделайте пять бейджей: «новый», «в работе», «на проверке», «готово», «отменено». Все — по одной формуле «фон 100 / рамка 200 / текст 800», отличается только оттенок. Подберите оттенки так, чтобы смысл читался интуитивно.
Задание 2. Проверка контраста
Возьмите пару bg-sky-500 + text-sky-200 и
исправьте её так, чтобы текст читался. Объясните, какое правило вы применили.
Задание 3. Затемнение поверх картинки
Сделайте блок с фоновым градиентом и текстом поверх. Добейтесь, чтобы текст читался независимо от яркости фона — добавьте полупрозрачный слой.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Какая ступень палитры обычно используется для основного текста?
Вопрос 2
Как задать фон с прозрачностью 40%?
Вопрос 3
Чем полезен currentColor в иконках?
Вопрос 4
Как в v4 называется класс линейного градиента слева направо?