Создание элемента popup: нативный HTML-тег <dialog>
Руководство по использованию нативного тега <dialog> для создания popup в HTML, CSS и React. Избавьтесь от лишнего JS, ловушек фокуса и проблем с z-index.
#HTML#CSS
HTML
Тег: CSS
Всего статей по тегу: 10
Список статей
Popover: Современный способ организации выпадающих меню
Popover: реализуем декларативные выпадающие меню с помощью HTML-атрибутов. Без JavaScript, с плавными анимациями и автоматическим управлением фокусом.
#HTML#CSSHTMLВёрстка каркаса сайта под Bottom Nav
Три варианта вёрстки каркаса сайта с нижним меню на мобильных устройствах. Разбор 3 архитектурных подходов (Grid, Fixed, Sticky).
#HTML#CSSCSSАдаптив таблиц под мобильные устройства
Способы настройки адаптива таблиц под мобильные устройства. Плюсы и минусы скролла и трансформации в блоки. Примеры кода.
#CSSCSSАнимация при скролле: Intersection Observer + CSS-переменные
Создаём быструю анимацию при прокрутке без тяжелых библиотек. Intersection Observer + CSS-переменные. Поддержка Progressive Enhancement и настроек доступности.
#CSS#JavaScript#АнимацияCSSКастомизация скроллбара в 2026: Webkit vs W3C Standard
Как правильно стилизовать скроллбары в 2026 году. Почему Chrome отключает ::-webkit-scrollbar и как подружить кастомный дизайн с Firefox.
#CSSCSSCSS-магия: создаём идеальную «Ромашку» и радиальные меню на тригонометрии
Использование функций cos() и sin() в CSS для создания адаптивных круговых интерфейсов, радиальных меню и блоков преимуществ без единой строчки JavaScript.
#CSS#HTMLCSSДизайн-система: умные поверхности в Tailwind CSS
Концепция умных поверхностей (surfaces), семантическое именование и автоматическая адаптация текста к фону
#CSS#Tailwind_CSSДизайн-системаИдеальный градиент для HTML5 Progress Bar: магия Container Queries
Как правильно стилизовать HTML5 тег <progress> с использованием современных CSS-функции Container Queries (cqi). Решаем проблему растягивающегося градиента.
#CSSCSSСоздание элемента спойлер: нативный HTML-тег <details>
Узнайте, как создать красивый и семантичный спойлер (аккордеон) без JavaScript. Используем нативный HTML-тег <details>, добавляем плавное раскрытие и стилизуем иконку под любой дизайн. Готовые примеры кода для FAQ.
#HTML#CSSHTML