CSS-маски превратили создание вырезов базовой геометрии в удовольствие. Но как только в дизайне появляется требование «пусть рамка повторяет форму выреза», всё обычно заканчивается SVG, картинками или хрупкими костылями. В этом выпуске разбираемся, как сделать настоящие рамки и тени для вырезов — на чистом CSS. В этом выпуске: - Почему border и box-shadow не работают с CSS-масками. - Как правильно делать тени для элементов с вырезами с помощью filter: drop-shadow(). - Приём с подложкой и копированием маски для имитации рамки. - Почему толщина рамки «плывёт» на наклонных участках и как это исправить. - Как использовать одноцветные градиенты вместо background-color для точного контроля формы рамки. - Настройка background-position, inset и размеров подложки для визуально ровной толщины. - Применение подхода для разных типов вырезов: линейных, радиальных и конических. Главное — перестать воспринимать CSS-маски как «чисто декоративную» фичу и начать использовать их как инструмент для точной геометрии интерфейсов. В выпуске — пошаговые разборы и наглядные примеры, которые показывают, что современный CSS уже закрывает задачи, считавшиеся невозможными без графики. Демонстрация → https://htmlacademy.ru/demos/247 Канал в Телеграм → https://t.me/cssbol Таймкоды: 00:00 Введение в CSS-вырезы 01:50 Примеры вырезов 02:19 Создание конического градиента 04:01 Сглаживание переходов 05:25 Проблемы с рамками и тенями 07:05 Имитация рамок 11:16 Настройка толщины рамки 12:17 Настройка толщины рамок 13:09 Проблема с толщиной рамок 14:02 Использование бэкграунд имидж 15:03 Комбинированный подход 16:12 Пример настройки 18:26 Рефакторинг и перенос модификатора 19:23 Настройка конического градиента 20:43 Линейный градиент 21:52 Круглый вырез 25:25 Завершение настройки 25:37 Работа с градиентами и масками 26:33 Интерактивные демо-версии #css #frontend #webdevelopment