# 1: Скругляйте углы с помощью науки и CSS-переменных
Сегодня мы поговорим о радиусе границы, особенно о вложенных элементах, и о том, как добиться того, чтобы все выглядело идеально даже на взгляд самого взыскательного дизайнера. В качестве отправной точки я использовал блок отзывов от Tailwind Plus и добавил несколько идей из нашего шаблона Radiant, чтобы получить пример, который, на мой взгляд, действительно хорошо отражает этот трюк. Вещи, о которых мы расскажем: - Как рассчитать идеальный радиус границы для вложенных элементов - Используя произвольные значения и функцию calc(), преобразуйте эту математику в CSS - Рефакторинг всего с использованием переменных CSS, чтобы весь пользовательский интерфейс оставался идеальным и синхронизированным, пока - вы экспериментируете с различными значениями радиуса границы и отступов. Поиграйте с этим примером вживую и ознакомьтесь с исходным кодом в Tailwind Play: https://play.tailwindcss.com/SIHJT7S215 # 1: Скругляйте углы с помощью науки и CSS-переменных: 00:00 Введение и проблема • Обсуждение проблемы с радиусами границ в шаблоне интерфейса бейсбольной карточки. • Пример блока отзывов из Styling Plus с закруглёнными углами. • Проблема: одинаковые радиусы границ выглядят странно. 00:43 Анализ реализации • Внешний и внутренний радиусы границ равны 4xl. • Неправильное использование одинаковых радиусов приводит к искажению дизайна. • Попытки решения проблемы путём перебора значений не всегда успешны. 01:26 Математика радиусов границ • Объяснение математики концентрических радиусов: радиус вложенного элемента равен радиусу родительского элемента минус отступ. • Пример расчёта: радиус родительского элемента 2rem 32px, отступ 0.75rem 12px, правильный радиус вложенного элемента — 20px. 02:05 Решение проблемы • Установка произвольного значения 20px решает проблему, но использует неправильные единицы измерения. • Необходимость использования ремов для радиусов границ и отступов. • Использование выражения calc для более чёткого отображения расчётов. 03:11 Улучшение решения • Выражение calc позволяет лучше понять логику расчётов. • Важность взаимосвязи между значениями радиусов и отступов. 03:44 Введение переменных • Добавление переменных для радиуса карточки и отступа карточки. • Обновление реализации для использования переменных. • Связанность всех значений делает код более понятным и гибким. 05:12 Заключение • Учёт всей необходимой математики обеспечивает идеальный радиус границы. • Код становится надёжным и гибким, ошибки невозможны.
Сегодня мы поговорим о радиусе границы, особенно о вложенных элементах, и о том, как добиться того, чтобы все выглядело идеально даже на взгляд самого взыскательного дизайнера. В качестве отправной точки я использовал блок отзывов от Tailwind Plus и добавил несколько идей из нашего шаблона Radiant, чтобы получить пример, который, на мой взгляд, действительно хорошо отражает этот трюк. Вещи, о которых мы расскажем: - Как рассчитать идеальный радиус границы для вложенных элементов - Используя произвольные значения и функцию calc(), преобразуйте эту математику в CSS - Рефакторинг всего с использованием переменных CSS, чтобы весь пользовательский интерфейс оставался идеальным и синхронизированным, пока - вы экспериментируете с различными значениями радиуса границы и отступов. Поиграйте с этим примером вживую и ознакомьтесь с исходным кодом в Tailwind Play: https://play.tailwindcss.com/SIHJT7S215 # 1: Скругляйте углы с помощью науки и CSS-переменных: 00:00 Введение и проблема • Обсуждение проблемы с радиусами границ в шаблоне интерфейса бейсбольной карточки. • Пример блока отзывов из Styling Plus с закруглёнными углами. • Проблема: одинаковые радиусы границ выглядят странно. 00:43 Анализ реализации • Внешний и внутренний радиусы границ равны 4xl. • Неправильное использование одинаковых радиусов приводит к искажению дизайна. • Попытки решения проблемы путём перебора значений не всегда успешны. 01:26 Математика радиусов границ • Объяснение математики концентрических радиусов: радиус вложенного элемента равен радиусу родительского элемента минус отступ. • Пример расчёта: радиус родительского элемента 2rem 32px, отступ 0.75rem 12px, правильный радиус вложенного элемента — 20px. 02:05 Решение проблемы • Установка произвольного значения 20px решает проблему, но использует неправильные единицы измерения. • Необходимость использования ремов для радиусов границ и отступов. • Использование выражения calc для более чёткого отображения расчётов. 03:11 Улучшение решения • Выражение calc позволяет лучше понять логику расчётов. • Важность взаимосвязи между значениями радиусов и отступов. 03:44 Введение переменных • Добавление переменных для радиуса карточки и отступа карточки. • Обновление реализации для использования переменных. • Связанность всех значений делает код более понятным и гибким. 05:12 Заключение • Учёт всей необходимой математики обеспечивает идеальный радиус границы. • Код становится надёжным и гибким, ошибки невозможны.