Popover: Современный способ организации выпадающих меню
Popover: реализуем декларативные выпадающие меню с помощью HTML-атрибутов. Без JavaScript, с плавными анимациями и автоматическим управлением фокусом.
#HTML#CSS
HTML
Статьи о web-разработке
Всего статей: 10 | Категорий: 3 | Тегов: 5
Список статей
Вёрстка каркаса сайта под 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: подключение через SVG-спрайт
Несколько способов вставки SVG-иконок на сайт: через img, инлайн и спрайты. Как управлять цветом, упростить поддержку и ускорить разработку.
#HTMLHTMLСоздание элемента спойлер: нативный HTML-тег <details>
Узнайте, как создать красивый и семантичный спойлер (аккордеон) без JavaScript. Используем нативный HTML-тег <details>, добавляем плавное раскрытие и стилизуем иконку под любой дизайн. Готовые примеры кода для FAQ.
#HTML#CSSHTML