👩‍💻 Как работает свойство box-shadow в CSS?

Свойство box-shadow в CSS позволяет добавлять тень к элементам. Вы можете задавать смещение по оси X и Y, размытие, размер растяжения и цвет тени. Это свойство особенно полезно для создания эффектов глубины и фокусировки на важных элементах интерфейса.

➡️ Пример:

/* Пример тени с мягким размытием */
.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

🗣️ В этом примере тень создается с отступом в 10px по оси X и Y, с размытием 20px и полупрозрачным черным цветом. box-shadow позволяет экспериментировать с глубиной, добавляя акценты к элементам интерфейса.

🖥 Подробнее тут

👩‍💻 Расчёт идеального контрастного цвета для фона

Реализуйте функцию getContrastColor(hex), которая принимает цвет в HEX-формате (например, "#ffffff") и возвращает либо "black", либо "white" — в зависимости от того, какой цвет текста будет лучше читаться на этом фоне.

Используйте формулу относительной яркости по стандарту WCAG для определения контраста. Это важно для создания доступных UI, кнопок, блоков с текстом и цветовых тем.

Решение задачи🔽

function getContrastColor(hex) {
const r = parseInt(hex.substr(1, 2), 16);
const g = parseInt(hex.substr(3, 2), 16);
const b = parseInt(hex.substr(5, 2), 16);

// Вычисление яркости по формуле WCAG
const brightness = (r * 299 + g * 587 + b * 114) / 1000;

return brightness > 128 ? "black" : "white";
}

// Примеры:
console.log(getContrastColor("#ffffff")); // "black"
console.log(getContrastColor("#000000")); // "white"
console.log(getContrastColor("#3498db")); // "white"