CSS: Цветовая модель RGB
В ходе курса мы уже сталкивались со свойствами, которые принимают цветовые значения (color, background-color, border-color). Чаще всего цвета задаются в RGB — либо в шестнадцатерной записи, либо через функцию rgb().
Шестнадцатеричная запись
HEX делит цвет на три блока по два символа (#rrggbb). Каждый блок описывает интенсивность красного, зелёного или синего в диапазоне от 00 до ff.
<p class="color-hex">Magenta text rendered via HEX</p>.color-hex {
color: #ff00ff;
}
Функция rgb()
rgb() работает так же, но использует обычные числа от 0 до 255.
<p class="color-rgb">Magenta text rendered via rgb()</p>.color-rgb {
color: rgb(255, 0, 255);
}
Прозрачность и rgba()
Для задания прозрачного фона используется дополнительный параметр — альфа-канал.
<div class="background-demo">Semi-transparent magenta background</div>.background-demo {
background-color: rgba(255, 0, 255, 0.5);
color: #3b0764;
padding: 16px;
border-radius: 12px;
font-weight: 600;
}
Задание
Создайте параграф с классом background-black-50 и установите ему полупрозрачный чёрный фон. Используйте функцию rgba(). Стили запишите в теге <style>
Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const p = query(document, '.background-black-50');
const pStyle = getComputedStyle(p);
expect(pStyle).to.have.property('background-color', 'rgba(0, 0, 0, 0.5)');
});Решение учителя откроется через:
20:00
