Сложные формы блоков — новый способ в CSS | CSS Боль скачать в хорошем качестве

Сложные формы блоков — новый способ в CSS | CSS Боль

clip-path и маски имитируют форму блока, но рамки и тени с ними не работают. border-shape меняет реальную форму — и всё работает из коробки. Разбираем, почему border-radius до сих пор единственное свойство, которое реально меняет форму элемента. Канал в Телеграме → https://t.me/cssbol CSS-маски и clip-path лишь скрывают части блока — визуальная иллюзия. Рамки, тени, outline не знают о вырезах и ведут себя как с прямоугольником. Новая функция shape() умеет описывать произвольные контуры в CSS-нотации: закруглённые части, переменные, единицы измерения. А свойство border-shape по аналогии с border-radius применяет shape() к реальной форме блока. Черновик спецификации уже есть, первые прототипы работают в Chrome Canary. Таймкоды: 00:00 — Введение 00:24 — Старые методы создания форм 01:16 — Преимущества CSS-масок 01:42 — Ограничения CSS-клипа 03:20 — Новая функция shape 04:15 — Проблемы с CSS-масками и клипом 05:52 — Идея border-shape 07:07 — Реализация border-shape 09:15 — Заключение Ссылки: Рамки и фоны, часть 2 →    • Вырезы 2.0 — рамки в форме вырезов | CSS Боль   Спецификация CSS Borders Level 4 — border-shape → https://www.w3.org/TR/css-borders-4/#... Статья Криса Койера про shape() → https://frontendmasters.com/blog/mode... Чемпионат по вёрстке — профессиональный трек → https://htmlacademy.ru/contest/3/prof... Подписывайтесь на канал, чтобы не пропустить новые выпуски CSS Боли! #css #bordershape #clippath #shapes #frontend